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

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

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

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:

How to use the dev.to API!

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 ・ Jun 7 '20

#beginners #webdev #php #tutorial

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

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

and then we can display it using a foreach loop

 <?php foreach ($response as $key => $article): ?>

<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>

<?php endforeach; ?>

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