Using Node.js to Display Recent Medium Articles
This is a short guide explaining the steps involved in displaying recent Medium articles in a Node.js application. I’ll be explaining the entire process, starting right from the initialization of the
package.json file. Please note that you will need to have Node.js and NPM installed on your machine if you want to follow along.
In this example, I’m going to be displaying posts written by James Altucher, since he an active contributor to the platform and gets a lot of attention.
To start out, create a folder for your project and then initialize a
package.json file using with
npm init --yes in your terminal. This will create a package.json file containing default values.
Now you have to install the Express module using the
npm install express --save command. The
--save flag automatically saves the module as a dependency in your
package.json file. That is the only module that we need to install for this project.
You should now have a
package.json file within your project folder that looks like this:
Server Side Code
Next, we’ll create a file named
This is where we require the necessary modules and assign them to variables.
Start the Server
This is where we call to execute our code and start the server on port 8080.
Specify Main Route
This block tells the app to display an
index.html page to the browser when viewing the root domain (represented by a
/). We haven’t created
Getting the Data
This function is what gets called in order to gather the Medium article data. All of the information gets stored inside of the
mediumData object, which eventually gets passed back to a callback function.
https.get function call makes a GET request using the parameters we specify in the object passed as the first argument. The object specifies the host and path from which to make the GET request, as well as the type of data to expect from the request (in this case we expect JSON).
The GET request’s response is handled by the callback function defined as the second argument to
parsedData, once all the chunks have been collected.
Medium article data can be found inside the
parsedData object. All of the article information is collected into the
posts variable to make pulling out individual article information a bit easier. In our case, we are pulling out the title, excerpt (i.e. first few words of the article), and URL from the 3 latest Medium articles for a specified author. I had to look through the different key/value pairs available in the
parsedData object in order to pull the correct data.
Please note that you cannot get the entire contents of an article using this method since it is not one of the values available in the returned JSON data. In order to get all of the article content you would have to use a different approach that would use the Medium RSS feed.
Once all all of the key information is pulled and stored into the
mediumData object, we call the callback function, passing
mediumData as the argument.
The reason we need to use a callback function as a parameter for the
getMediumData function is because the
https.get function is an asynchronous operation. Using a callback function allows us to wait for the asynchronous operation to run its course and pass back a fully populated
mediumData object. You’ll see how we call the
Passing the Data to the Client
This is where we call the
getMediumData function and pass the
mediumData object back to the client. As you see, this is all being done through a GET request to the
Client Side Code
Ok, we’ve only got one more file to create and that is
index.html. Go ahead and create this file inside of your project folder. To start off, let’s create the main shell for the page.
Next, we will create the main page wrapper that will go inside of our
<body> element, and make sure it’s after the jQuery script.
This code first makes a GET request to the
/mediumPosts path (which we defined earlier) after the page has been fully loaded. The result returned from the GET request is then used to create HTML elements that display the title and excerpt of recent Medium articles, along with a link to read more.
If all goes well, you should be able to run the app and see the 3 latest medium articles from the author you specified in
app.js. Start your server by running
node app.js in your terminal, open up a browser, and go to
localhost:8080 . In my
index.html file, I’ve added some CSS styling (inspired by Shopify’s Polaris design system) and the result is the following:
A similar approach can be used to make API calls to other web applications (e.g. Strava, Github, and Twitter) and display the data on the client side. Many APIs require that you make your API calls on the server due to the Same-origin policy. Personally, I’ve use this same method to display my latest running stats on my personal website.
Also, please note that I removed any sort of error handling from the code to help explain the main working parts of the app. This is not good practice when trying to build your own applications.
Finally, if you end up using this for your own projects, have suggestions, or would like further clarification, please let me know in the comments! All the project code can be found on Github.