How to Setup Multiple API Routes with Node and Express

This is the second article in a series using Node, Express, MongoDB, and React to teach the process of creating a simple full stack application.

The first article, A Simple Guide to Node/Express, walked through how to setup a Node web service with Express and covered:

• setting up a Node environment
• create a package.json file
• installing Express
• developing an Express API
• setting up the server to listen through a port for API calls

Super simple node service with Express that return some text after a API call.

In this article, we will:

1. Create an API route that deploys an “index.html”.
2. Develop a router that has multiple API routes.
3. Write an API that returns a json object.

I’ll break down the following code line by line:

This is the app.js. It look like a lot but it takes all of 15 minutes.

Let’s get started

Step 1: Set the project up (some housekeeping)

I’m going to quickly run through this part. The “why ” or “how ” was covered in the first article.

1. Create a directory you will be working in.
2. Create a package.json file.
3. Install Express
4. Create a “public” subfolder and place whatever CSS stylesheets, JavaScript files, or images that will be reference in your HTML pages or front-end client.
5. Create an “index.html” file in the root directory of the app.
6. Create a “mentors” subfolder and place two files name “kdodds.html” and “sKlymenko.html”. Keep it simple.

This is an example of a “index.html” file. You can have anything you want.

Step 2: Setup Express and create an API call that returns the “index.html” page

These 7 lines of code does all the heavy lifting for you.

Example of a stylesheet being reference in a index.html file. That stylesheet lives in the public folder.

Line 5–7 is an Express API route to the root directory that responds by using the “response” object’s “sendFile” method to return the “index.html”.

Yeahhhhhh, we did it. We have created an API that deployed an index.html page.

Step 3: Create multiple routes with Express’s Router

On to the meat and potatoes of this article!!!

This is it. This is treasure you came for.

Line 9 uses the Express’s router method to create a router.
Line 10 uses the router object to create a route called ‘/kentDodds’. This route will listen for any API calls (get, post, etc.) routed through the mentorRouter that starts with ‘/kentDodds’.
Lines 11–13 responds to the API “.get” call by returning the “kdodds.html” file.
Line 14–17 is the exact same. Whenever the route ‘/sklymenko’ is called with the API “.get” method, the ‘sklymenko.html’ file is returned.

Hi Five!!!! We are on a roll. We have created a router with multiple routes.

Step 4: Route to return data

For this next part to work, create a subfolder named “resources”. Place in that folder a JavaScript file name “states.js”.

This is the states.js file which contains the data to be sent.

If you notice at the end of the “states.js” file, there is a module.exports function that exports the variable states. This is important and cost me precious moments I will never get back in my life.

This is how to send data.

Line 19 uses the Node’s require and path built-in modules to export the data from states.js to the local variable.
Line 20–22 uses the response’s .json method to convert the data into a json and return it. The API call http://localhost:3000/states will return the states json.

Data, Data, Data

So close to being finished.

Step 5: Create a middleware to use the router

Final piece of the puzzle. Let’s do this!!!!

Line 23 creates an Express middleware that makes an overall family route called ‘/mentors’ that is linked to the mentorRouter. This produces API calls like http://localhost:3000/mentors/kentdodds.

Check out Kent Dodds, he is awesome!!!

Finished, we now have multiple routes and can send data with Express API calls.

You can follow my journey doing #100DaysOfCode on Twitter at JCSmiley4 or connect with me on LinkedIn at JC Smiley Jr. As always, let’ have fun and do lots of victory dancing.

Developer — Tech Meetup Organizer— Learner