How to use the Dev.to API in 2022
Tags: tutorial, javascript, webdev, php
Published: 2022-02-06 06:32:09

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.

![Response Object properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sky5elbti6v6wlcwv5jx.png)

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:

{% link https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3 %}

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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](https://developers.forem.com/api#operation/getUserArticles)