DEV Community

Cover image for How to use the Dev.to API in 2022
Luis Juarez
Luis Juarez

Posted on • Updated on

How to use the Dev.to API in 2022

The Dev.to platform is built on Forem, which means it has all sorts of great API endpoints available! As a developer you may want to utilize this functionality to display your latest blog posts on your portfolio site. Let's dig into how we can accomplish that:

Front-end / JavaScript

If we want to fetch the data on the front-end using Javascript, we can use the built in Fetch API:

  `fetch('https://dev.to/api/articles?username=iamluisj')
        .then(response => response.json())
        .then(data => console.log(data));`
Enter fullscreen mode Exit fullscreen mode

Now checking the console, we can see all the information we received in the response.

Response Object properties

Now that we have the response, we can update the properties of our page like so

fetch('https://dev.to/api/articles?username=iamluisj')
            .then(response => response.json())
            .then(data => {
              document.getElementById('headerimage').setAttribute("src", data[0].cover_image);
                document.getElementById('title').innerText = data[0].title;
                document.getElementById('description').innerText = data[0].description;
            });
Enter fullscreen mode Exit fullscreen mode

Better yet, I would recommend using a for loop if you plan on displaying multiple articles, but I will leave that as an exercise for the reader.

Backend / PHP

Now you may want to fetch the data on the backend of your server using PHP.

Inspired by this post:

The linked article code receives error 403 Forbidden Bots, which is caused because our request is missing a userAgent header. Luckily cURL allows us to include a userAgent by setting the CURLOPT_USERAGENT option.

$userAgent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)';
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent));
Enter fullscreen mode Exit fullscreen mode

If you are curious to learn more about the User Agent request header, it is typically used to identify what browser is being used so websites know what features are available. For example, if the UserAgent string identifies Internet Explorer, I could have my site render with a fallback stylesheet that supports older browsers.

So our full request using cURL should be

$ch = curl_init(); //create curl object

curl_setopt($ch,CURLOPT_URL, "https://dev.to/api/articles?username=iamluisj");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, true);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)');

$data = curl_exec($ch);
//parse response to json
$response = json_decode($data, true);
Enter fullscreen mode Exit fullscreen mode

and then we can display it using a foreach loop

 <?php foreach ($response as $key => $article): ?>
Enter fullscreen mode Exit fullscreen mode
<img src="<?php echo $article['cover_image'] ?>" alt="blog">
<h1> <?php echo $article['title'] ?> </h1>
<p><?php echo $article['description'] ?></p>
<a href="<?php echo $article['canonical_url'] ?>">Link</a>
Enter fullscreen mode Exit fullscreen mode
<?php endforeach; ?>
Enter fullscreen mode Exit fullscreen mode

add in some styling and you are all set to display your great posts on your portfolio site! Let me know if you have any questions in the comments :)

If you are interested in other API endpoints, you can find more info here

Top comments (7)

Collapse
 
peterjohnson profile image
Peter Johnson

while trying to fetch data using dev.to/api/articles?username=myuse... its just retrieving 2 of my articles even though I have got more than 2 articles published. I've used axios to fetch data(React)...Any idea why this is happening?

Collapse
 
iamluisj profile image
Luis Juarez

Hey Peter, sorry for the delayed response. From looking at your profile I'm only seeing 2 articles that were published before June 9th (the date of your comment), so perhaps double check to see if your other articles are published publicly?

I've also noticed that sometimes the API takes some time to update with new articles, usually within a day.

Collapse
 
megagon profile image
adamgonzo

you can also use per_page

Collapse
 
mtfoley profile image
Matthew Foley

Totally different use case for the API but check out this shell script for looking at tags of the most recent dev.to articles!

gist.github.com/mtfoley/8816717129...

Collapse
 
iamluisj profile image
Luis Juarez

Glad this could help! I thought it was weird I didn't get that error message using fetch on the front end, so I figured it was a missing request header. Hopefully this saved you some time :)