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:
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
Top comments (7)
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?
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.
you can also use per_page
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...
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 :)