DEV Community

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Posted on • Updated on

How to use the dev.to API!

Why?

I use dev.to as my main dev blogging area now, but I want to show-off my blogs on my portfolio! So we're going to create a simple list of the latest 3 blog articles which link back to the dev.to site. For this tutorial I'll be showing how this can be achieved in PHP.

Let's go!

First of all, the below is a great starting point to understand the dev.to API and all of the possible endpoints.

We're going to be using this endpoint: https://dev.to/api/articles?username=nataliedeweerd which generates a JSON object with the author's latest 30 articles. To get your personal endpoint, change the nataliedeweerd username to your own.

So how do we get this data into our website? In PHP we can use something called cURL. cURL (client URL) is a PHP library which allows you to make HTTP requests. So you can call a URL in your code and get a HTML response from it.

The below code shows a basic curl function which gets us our data:



$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://dev.to/api/articles?username=nataliedeweerd",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);


Enter fullscreen mode Exit fullscreen mode

We need to decode this data before we can effectively use it however.



$response = json_decode($response, true); 


Enter fullscreen mode Exit fullscreen mode

This decodes the json object into a much more usable array! All we need to do now is loop through the array, and print out the results.



foreach ($response as $key => $article){

    echo '
        <a href="'.$article['url'].'" class="blog__article">
            <h2>'.$article['title'].'</h2>
            <div class="blog__description">'.$article['description'].'</div>
            <div class="blog__readmore">Read More</div>
        </a>
    ';

    if ($key == 2){ break; }

}


Enter fullscreen mode Exit fullscreen mode

Because the array key's are numeric, we can use these to determine how many articles we've printed. If we've printed 3 articles the key will be 2 (array's start from 0 don't forget), so we break out of the foreach.

If you want to have a closer look at what keys the array is printing out, you can use the below code before the foreach loop:



echo '<pre>'.print_r($response,true).'</pre>';


Enter fullscreen mode Exit fullscreen mode

This will show you everything the decoded JSON is returning, allowing you to include your article's images, or canonical links, or tags!

And that's it! We just need to apply a bit of CSS and our dev.to articles are printing out wherever we want!

Let me know if you have any more questions below.

Top comments (18)

Collapse
 
mince profile image
Mince

This is awesome

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

If it's only 1 specific article you want to extract, you can use https://dev.to/api/articles/148356, and replace 148356 with the unique post ID. You can then access the title and url keys.

Still trying to find the easiest way to obtain the unique post ID... however you can use this endpoint https://dev.to/api/articles?username=nataliedeweerd and look for the "id" key to find the unique post's ID.

See here for more info docs.forem.com/api/#operation/getU...

Hope that helps somewhat... if not, let me know what you're trying to achieve and I'll help further :)

Collapse
 
arhamsayyed profile image
Arham Sayyed

I Want to build a mobile client for dev.to
so i wanted to fetch the data in general, and allow the user to log in to their account can anyone help?
also, I am looking for contributors. so feel free to contact me for that too

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Really useful article

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Glad you found it helpful! :)

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Is it possible to get only 2 latest posts?

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Edited

Absolutely!

Arrays start from 0, meaning if you want the latest 2, you want to stop when the array key (the index of the array item) reaches 1. So you have 0, and 1. The API automatically orders by newest first, so we just need to tell it when to stop!

In the code above, simply change if ($key == 2){ break; } to if ($key == 1){ break; }

Hope that helps :) but let me know if you have anymore questions, or it doesn't make sense.

Collapse
 
grantdotdev profile image
Grant Riordan

do we know how we can view the documentation for this API, in terms of query params and such. I'd like to filter out any article which has been archived, or is in Draft format. As when i hit the api, it seems it is returning archived posts aswell.

Collapse
 
coderamrin profile image
Amrin

you can easily do that with this.
const latest2Post = postArray.slice(0, 2);

Collapse
 
sonyarianto profile image
Sony AK • Edited

nice, but how to get the markdown content of each article? any endpoint for that?

Update:
Oh ignore my question above, finally found the answer at dev.to/api

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Good job finding the answer! 👍

Collapse
 
cleveroscar profile image
Oscar Ortiz

Does anyone know how to get this to work with ReactJS?

I am currently stuck on the the request preflight section where I am getting blocked by CORS.

I have not been able to find anything online to help me solve this issue and I would really love to be able to use my API key freely.

Hope someone can help.

Collapse
 
decocodes profile image
Deco
Collapse
 
lpatipat profile image
lpatipat

Been looking to jumpstart blogging as a developer! This might be really cool to integrate into my portfolio as well. Thanks a bunch :)

Collapse
 
merudra754 profile image
Rudra Pratap

Is this API limited to only latest 30 blogs? If yes, how to fetch all of them?

Collapse
 
stevenmodimo profile image
StevenMODIMO

Thank you and very helpful. But what if i want to fetch comments from article(s) and get a response with their comments and images so i can display them. Help please.