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.


Initial Setup

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 app.js that will contain all of our server side JavaScript code. I’ll show and explain each piece that goes into this file. All these blocks appear in the same order as they do in the app.js file.

Require Modules

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 index.html yet.

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.

The 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 https.get. Data received from the GET request is collected in chunks (due to the asynchronous nature of the operation) and is parsed into a JavaScript object, 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 getMediumData next.

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 /mediumPosts path. This GET request gets called from the client side when the DOM is finished loading. You’ll see this client side JavaScript next, when we create the index.html file.

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.

This is where all of the Medium articles will be appended. Next, we will be add our client side JavaScript at the bottom of the <body> element. First, we load jQuery so we can use it for our own JavaScript code.

Now, we will add our own JavaScript. Again, add this to bottom of the <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.

Result

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:

Final result displaying recent Medium articles

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.