How to Use the Forum API to Display Your DEV.to Blog Posts on Your Website (Easy!)

In the past, I had blog websites (think Jekyll and Gatsby) where I would create and publish my blog posts, then I would
Later cross-post them on DEV.to and other sites.

But what if you want to do it the other way round, huh? Well it’s actually very easy! Even no authentication is needed. In this article I will explain how to use the Forum API to display your blog posts on your website. In this example, I’ll also use feedback And this get api,

First, go and take a look at the docs for the Forum API, read a bit, and familiarize yourself a bit. Then go to version 1 of the API to see the available endpoints.

So I have a React app that will display blog posts. I just need to make a fetch request to the article endpoint with my username as a parameter to display my posts.

I want to make the request as soon as the page is loaded, so I created a function called getPosts() which makes the request to be fetched to the API endpoint and I called it in use which runs once. To get your own posts, simply put your username in the URL, or add it as a parameter:

// replace {yourUserName} with your DEV.to username:
"https://dev.to/api/articles?username={yourUserName}"
enter fullscreen mode

exit fullscreen mode

Looks like this in my app:

    useEffect(() => {
        getPosts();
    }, []);

    const getPosts = async () => {
        try {
            const response = await fetch(
                "https://dev.to/api/articles?username=tiaeastwood&per_page=8",
            );
            const json = await response.json();
            setPosts(json);
        } catch (error) {
            console.log("error", error);
        }
    };


enter fullscreen mode

exit fullscreen mode

I’ve also added a query so that it limits the result to 8 items at a time (per_page=8) and the API docs will show you what other queries you can use.

So once the fetch request is made successfully, I use setPosts() to store the result of the fetch in the state, so that I can access it in the render. This gives us an array of post objects, and I can access the various properties of each such as title, cover_image, etc. to dynamically display what I want in my component; You can see that in the post thumbnail component:

const PostThumbnail = ({ post }) => {
  return (
    <div className="grid-item">
      <div className="text-overlay">
        <p>{post.title}</p>
      </div>
      <div className="gradient"></div>
      <img src={post.cover_image} alt="" className="cover-image" />
    </div>
  );
};

const App = () => {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    getPosts();
  }, []);

  const getPosts = async () => {
    try {
      const response = await fetch(
        "https://dev.to/api/articles?username=tiaeastwood&per_page=8"
      );
      const json = await response.json();
      setPosts(json);
    } catch (error) {
      console.log("error", error);
    }
  };

  return (
    <div id="app">
      <h1>Latest Blog Posts</h1>
      <div className="grid">
        {posts.map((post) => (
          <PostThumbnail post={post} />
        ))}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));


enter fullscreen mode

exit fullscreen mode

When you place your fetch request, I recommend going to console.login somewhere, or taking a look in the network tab of your browser devtools to see all the information you get about each blog post, That’s enough!

Finally, here’s the codepen example, so you can see how the code all comes together 🙂


Credit:
The cover image of this post is from Unsplash. But Christopher Machicoen-Hertaud’s

Leave a Comment