Did you know DEV.to has an API that lets us interact with all kinds of data from it's platform?! That's right, articles, comments, reactions, users, even videos! All the data, readily available for us to use in our own projects.
Okay, it's actually the Forem API, but we're on dev.to, and it just feels right to call it the dev.to API 😅
In this post, I'm going to walk you through everything you need to know to make use of the dev.to API. We'll have a quick look at their docs, make a request to get the latest articles published on the platform. Then I'll show you how to get your API key and how to use it to gain access to even more cool data.
A quick note before we dive in. I'll be using Javascript in these examples because I have to choose something to show them in. But that doesn't mean you have to use Javascript yourself. You can use whatever language/tool you like that supports making HTTP requests. But if you get stuck or have questions, feel free to ask away in the comments and I (or someone in this awesome community) will be able to help you out.
With that said, let's go!
The Docs
You can find the docs for the dev.to API at https://developers.forem.com/api...or you can use dev.to/api since it's shorter and you will be redirected. As of this writing, you'll land on the main page of the API documentation that gives you the choice of choosing version 0 or version 1 of the API, which currently looks like this...
In this post we're going to use version 1 since version 0 is deprecated and will be removed in a future release. After clicking Version 1, we're taken to the top of the API docs, and immediately on the left hand side of the screen we see a list of all resources that are available through the API...
As of now, there are 14 types of resources, and if you click on any of them, that section will expand and you'll see that each one has at least one endpoint for GETting, POSTing, PUTing, and/or DELeting...note that not all resources have all the traditional CRUD (Create, Read, Update, Delete) operations available.
Let's first take a look at the articles endpoint, and click on GET Published Articles.
This is an open endpoint, meaning it doesn't require authentication. There are several other open endpoints available from the list, but we'll just stick to this one for now.
The summary of the endpoint at the top of the section explains that this endpoint will return a paginated list of featured, published articles ordered by descending popularity.
Beneath the summary is a list of the query parameters you can pass to it to control the data you get back. Things like the number of articles it should return per page, or what tags or username to filter the results by. There are several other options as well so be sure to read through them carefully as some have additional conditions you'll want to be aware of.
Continuing to scroll down, you'll see the path of the endpoint as a dropdown, and if you click to open it, you'll see the full url...
For this endpoint the url is https://dev.to/api/articles. This will be the url we'll use to make our first request. But before we do, let's continue to scroll down.
Beneath the url dropdown you'll see an example of what a successful 200 response from this endpoint will look like with sample output to use as reference.
As you can see, a single article has all kinds of data for us to use!
If you look at other endpoints, you'll find that most of them will follow a similar pattern, though some will include additional information, like what errors the endpoint can respond with (as well as what that error response payload would look like) and what the body schema looks like for POST and PUT endpoints.
Now that we know how this endpoint works, let's get our hands dirty and make our first request!
Making a Request to an Open Endpoint
As we saw in the last section, the url of this endpoint is https://dev.to/api/articles. We also know that we can specify how many results we'll get back for each page. The default is 30, but I don't think we need that many for this example. I think 5 is more than enough for us to take a look at. So let's make a simple fetch request to this endpoint passing the per_page query parameter with a value of 5.
const fetchData = async () => {
const res = await fetch('https://dev.to/api/articles?per_page=5');
const articles = await res.json();
console.log(articles);
}
That's it! After we call our function we get a response back from the API with 5 articles that are currently published on dev.to printed out in our console...
How cool is that!
As you can see, dev.to's open endpoints make it really easy and convenient to pull article data into your own projects. With this single endpoint you could build your own blog post reader, styled however you like.
Or, if you're feeling brave, you could take it a step further and push these results into an LLM like ChatGPT with a prompt requesting a summary of the article. With a little fine tuning to account for things like token count and summary size, you could have yourself a pretty nifty little summary generator to help you get the gist of the most recent featured articles!
What else could you build with this data? I'd love to hear your ideas!
API Key Authentication
So we've seen one of the dev.to API's open endpoints. But if you explored through the docs a bit earlier, you probably saw lots of other endpoints. You may have also noticed that many of them require an API key. Not sure what an API key is? No worries...
To put it simply, an API key is a unique bit of text made up of a bunch of random letters and numbers (and sometimes special characters...but not in this case). This key acts much like a key you would use in the real world to gain access to something restricted, like a home or a car. Except in this case, this key grants you access to the API. And much like real keys, anyone with a copy of that key can gain access to the restricted thing, so you always want to keep your keys private. Understanding how keys work is a bit outside the scope of this article. But if you're curious, it's an interesting topic I certainly encourage you to check out!
Now that we know what an API key is and what it's used for, let's go get one of our own.
First, you'll need to login to your dev.to account and go to Settings.
From the settings page, we need to go to Extensions.
Scroll all the way to the bottom of the extensions page to find the "DEV Community API Keys" section.
Enter a description for your key. Many people like to use the name of the project the key will be used in, but you're free to enter whatever description you like. I'm just going to use "blog-post" for mine. Once you've entered the description, click Generate API Key. After a moment, you should see a new dropdown appear beneath the button with the description you entered.
Now expand the dropdown and you should see your new API key.
Awesome, now we have our API key! We're almost ready to make requests to the protected dev.to API endpoints. There's just a couple things we need to know first.
🚫CORS
The API documentation mentions that, "All authenticated endpoints are CORS disabled, the API key is intended for non-browser scripts". This means that we won't be able to make requests to the authenticated endpoints from the browser. So for the following example, I'll be running the script using Node, but you can use whatever non-browser method you prefer.
api-key Header
Just having an API key isn't enough for us to make requests to authenticated endpoints. We actually have to pass that key along with each of those requests...but how do we do that?
Most API's out there require you to pass your key as a request header, and the dev.to API is no different. The API docs show that we need to set our API key as the value of the api-key header, and if you're curious about how to do this in Javascript (since that's what I'm using here), MDN docs are the place to get the scoop (or you can just read on to see how I do it in the section 😜).
Making an Authenticated Request
Alright, so we know we have to make our request outside the browser, we have our API key and we know how to use it. Time to make our authenticated request!
For this example, I'm going to use the GET User's published articles endpoint to retrieve my own personal published articles. And just like the example above, I only want the latest 5, so I'm going to include the per_page query parameter again and set it to 5.
🚨 Important!!
DO NOT SAVE YOUR API KEY IN YOUR CODE!
There are many approaches to storing secrets like API keys for use in your code. But it's important to know that if you are going to use version control (like git) or share your code in any way, your API key should NEVER be included. There are a lot of different ways to handle this, but in this example I've stored my API key in an environment variable named DEV_TO_API_KEY in an .env file. And since I'm using SvelteKit, I'm able to simply import that variable. If you aren't using the same approach, how you gain access to your API key will be different...but if you are unsure how to do this in whatever way you are trying to, I'm sure I or someone in the community can help point you in the right direction. 😊
And with that important warning out of the way, let's make our request!
import { DEV_TO_API_KEY } from "$env/static/private";
export const fetchMyArticles = async () => {
const res = await fetch('https://dev.to/api/articles/me/published?per_page=5', {
headers: {
'api-key': DEV_TO_API_KEY,
}
});
const articles = await res.json();
console.log(articles);
}
Pretty simple right?
When we run this (outside the browser or course) the output is very similar to what we saw in the first example. It's an array of article objects. But in this case, it's not all the featured articles from ALL users on the dev.to platform. Nope, this time it's only my personal published articles, listed in reverse chronological order of their publication dates.
Now I can showcase my recent posts on my own website! So awesome!
And That's It!
So that's really all there is to using the dev.to API. There are a bunch of open endpoints that you can simply make unrestricted requests to in order to get all sorts of data for your personal projects. Or you can use a personal API key, which opens up even more possibilities!
As a final note, I highly encourage you to read through the docs to discover all the different things you can do with the dev.to API...because there's a lot of options. In this post I only used article endpoints, but there is so much more you can do! And I would love to hear about what you build with this API! So feel free to drop a comment here to share your awesome projects!
Thanks for taking time to learn with me! Until next time, Happy Hacking!
Top comments (0)