How to Fetch Your Dev.to Articles for Your Portfolio with React, Vue, and Next.js

Are you building a portfolio and looking to showcase your Dev.to articles? Whether you're using React, Vue, or Next.js, there are a few simple steps to follow. In this article, I'll guide you through the process.

If you use Hashnode, I have similar article to fetch your articles from the platform. Check here

Before we dive in, make sure you're familiar with the React or Vue.js ecosystem. If you're new to these technologies, you can start by checking out React's official documentation and Vue's official documentation.

If you're new to Next.js, but familiar with React, don't worry. The same syntax you learned for React will work in Next.js.

Here are the three steps to fetch your Dev.to articles:

Step 1: Create and set up your project.

For React or Next.js: Run npx create-next-app in your terminal and follow the prompt.

Note that React Docs now recommend bootstrapping React projects with Next.js and some other framework, that’s why I’m not using npx create-react-app.

For Vue: Run vue create project-name and follow the prompt.

Note that you must have installed Vue CLI before that command will work. If you haven’t already, run npm install -g @vue/cli, and after it has been installed, run the command above to create a Vue project.

Step 2: Obtain your Dev.to API and API key.

The Dev.to API is a simple REST API: https://dev.to/api/articles?username=your-username. Replace "your-username" with your Dev.to username.

Without the API key, you can fetch your articles. However, some APIs require an access token to be passed into the header. That's why we're going to use the Dev.to API key (to fulfil all righteousness 😏).

To get your API key, sign in to your Dev.to account, go to your Settings, scroll down, and generate a key for your project.

How to get your key:

It's recommended to store your secret key in a .env file. Move to the root of your project and create a .env.local file.

Alternatively, you can run touch .env.local in your terminal to create the file. Paste the following code into the file:

MY_DEV_KEY=24343434.

Replace 24343434 with the API key you generated and save the file.

Step 3: Display your Dev.to articles.

Let's start with React or Nextjs:

Create a component and call it whatever you like, e.g BlogPost.js and paste this code there.

import React, { useState, useEffect } from 'react';

const DevToArticles = () => {
  const [articles, setArticles] = useState([]);

 const Dev_Username = “ghostwriter”  // replace ghostwriter with your Dev.to username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

  useEffect(() => {
    fetch(`https://dev.to/api/articles?username=${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      }
    })
      .then(res => res.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div>
      {articles.map(article => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
 <p><a href={article.url}>Read more</a> </p>
        </div>
      ))}
    </div>
  );
};

export default DevToArticles;

For Vue.js

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <h2>{{ article.title }}</h2>
      <p>{{ article.description }}</p>
     <p><a :href=”article.url”>Read more</a> </p>
    </div>
  </div>
</template>

<script>
 const Dev_Username = “ghostwriter”  // replace ghostwriter with your Dev.to username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

export default {
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    fetch(`https://dev.to/api/articles?username=${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      }
    })
      .then(res => res.json())
      .then(data => {
        this.articles = data;
      });
  }
};
</script>

I only returned the post title, description and url but if you want to extract more, it's possible.

To have an idea of what you have access to, you can log the API data to your console. To this in your current setup, just console.log(article)

For example:

You can have access to the article cover image, user data (an object), timestamp etc.

> NOTE: You can style your component to your satisfaction with CSS.

More about DEV.to API:

The Dev.to API provides access to a variety of resources, including articles, comments, users, and tags. Here's a brief overview of the types of data you can access from the API:

Articles: You can retrieve information about articles, including their titles, content, authors, and publication dates.

Comments: You can fetch comments on articles, including the commenter's name, comment text, and the article they're commenting on.

Users: You can retrieve information about Dev.to users, including their usernames, bios, and profile pictures.

Tags: You can access the tags associated with articles, which can be useful for organizing and categorizing content.

In addition to these resources, the Dev.to API also provides endpoints for interacting with the Dev.to platform, such as creating and updating articles and comments.

CONCLUSION: Fetching Dev.to Articles

Fetching Dev.to articles in a React or Vue component is a straightforward process, thanks to the Dev.to API.

By following the steps outlined in this post, you should be able to create a simple React component that fetches and displays Dev.to articles. Good luck!