How I implement dev.to API on my website 🤗

I have created my own portfolio and described what it has in a previous article. In this article, I will show how I use DEV Community API to fetch articles that I have published.

Get API 🔑

Like every API, you need to get your API key first.

1. Go to your settings/extensions pages

2. Find the section name "DEV Community API Keys" at the end and fill the description with every text you want (ex: Expose Article), click button to generate API key
   

3. It will generate the collapsed item below, exposing it to get the key
   

Get published articles

After you got API key, you can use the code below to get the data

/**
 * Get published articles.
 * @param {number} page_size - the number of items to return per page.
 */
function fetch_articles(page_size = 7){
  // Build URL
  const base_url = "https://dev.to"; // domain
  const router = "api/articles/me"; // API router
  const url = `${base_url}/${router}?per_page=${page_size}`; // https://dev.to/api/articles/me/published?per_page=7

  // Get data from API
  const response = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      "API-Key": "Your Key Is Here",
    },
  }).then((data) => data.json());

  return response;
}

Conclusion

So that is the way I use DEV Community API to get published articles. In the next article, I will write about why and how I combine Google Sheets + Google Drive to save my pet projects 😬

Happy Coding!

Comments

[sahra 💫]

This is great, I remember when I wanted to get the articles from my dev.to account, I didn't even know they had an API for that, I just ended up copying and pasting the relevant data of my articles into a JSON file and fetching the data to display on my website. So it was kind of a manual process of updating my JSON file with each new article I created. Really needed this.

[Luke]

Thank u (～￣▽￣)～