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

But what if you want to do it the other way round, huh? Well it's actually super easy! There isn't even any kind of authentication needed. In this article I will explain how to use the Forem API to display your blog posts on your website. In this example, I will also be using React and the fetch API.

Firstly, go and have a look at the docs for the Forem API, have a little read, and familiarise yourself a little bit. Then head to version 1 of the API to see the available endpoints.

So I have a React app that will display blog posts. All I need to do to display my posts, is to make a fetch request to the articles endpoint, with my username as a parameter.

I want to make the request as soon as the page loads, so I made a function called getPosts(), which makes the fetch request to the API endpoint and I have called this in the useEffect which runs once. To get your own posts, just insert your username into the url like so, or add it as a parameter:

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

In my app it looks like this:

    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);
        }
    };

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

So once the fetch request has been successfully made, I use setPosts() to store the result of the fetch in state, so that I can access it in the render. This gives us an array of post objects, and I can access the different properties of each, such as the title, cover_image etc to dynamically display what I want to in my component; you can see that in PostThumbnail 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"));

When you make your fetch request, I recommend popping a console.log in somewhere, or having a look in the network tab of your browser devtools, so you can see all of the information you get about each blog post, it's quite a lot!

Finally, here is the CodePen example, so you can see how the code all comes together :)

Credits:
This post's cover image is by Christopher Machicoane-Hurtaud on Unsplash