DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to use the Forem API to display your DEV.to blog posts on your website (easy!)
Tia Eastwood
Tia Eastwood

Posted on • Updated on

How to use the Forem 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 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}"
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
andypiper profile image
Andy Piper

Nice work! Reminds me of something @thomasbnt built before, as well. Cool to see the different ways that the API can be used.

GitHub logo thomasbnt / devtoprofile

An example of getting data from the dev.to API to display its own articles.

Make with VueJS GitHub last commit Discord Twitter Follow

Getting data from the API of DEV.TO

An example of getting data from the dev.to API to display its own articles. Work with VueJS, fetch and the API of dev.to.

Note

See the preview of this project here β†’

Preview of this project

Note

More projects like that ? Check this list.

See the list of awesome projects with an API

How to get my data ?

Change this lines in the file src/components/devto.vue :

const USERID_DEVTO = '18254'
const USERNAME_DEVTO = 'thomasbnt'
Enter fullscreen mode Exit fullscreen mode

How to get my ID ?

Get your ID by using the website. Press F12, and on the body element, you have a data-user attribute. This is your ID.

How to get my dev.to ID


How to develop this project

Project setup

yarn install
Enter fullscreen mode Exit fullscreen mode

Compiles and hot-reloads for development

yarn serve
Enter fullscreen mode Exit fullscreen mode

Compiles and minifies for production

yarn build
Enter fullscreen mode Exit fullscreen mode

Lints and fixes files

yarn lint
Enter fullscreen mode Exit fullscreen mode

Customize configuration

See Configuration Reference.




Collapse
 
thomasbnt profile image
Thomas Bnt

Thanks, Andy, for highlighting my project! πŸ€©πŸš€

Collapse
 
hilleer profile image
Daniel Hillmann

Exciting! How does it work in regards to SEO etc? πŸ‘€ If I'd like to also attract traffic to my own site

Rust language vs others

Stop by this week's meme thread!