« Previous Tutorial Next tutorial »

In our previous tutorial, we took a quick look into Express routes and views, but it’s worth diving a little deeper, especially into routes, since we’ll be using them to build out our API endpoints (views, as mentioned, aren’t going to come into a play a ton, since this is a single-page React app, but we’ll still cover them just for clarity).

Let’s open routes/index.js and take another look at this file. The first line requires the Express module, which gives us access to all of Express’s functionality, and the second line uses that to establish an instance of Express’s router, which handles HTTP traffic. For the purposes of our API, there are four HTTP Request Methods that a browser could send that we’ll need to account for: GET, POST, PUT, and DELETE.

You might already be familiar with GET and POST (if you’re not already familiar with all four, that is). GET is the standard request for a file. When you load up a web page, you’re doing a bunch of GETs. One for the HTML, one for each CSS file the page loads, one for each JS file the page loads, etc. Incidentally, this can really bog down a page’s load speed, so that’s why it’s a good idea to bundle CSS and JavaScript into as few files as possible in order to not make a ton of GETs.

A POST is the opposite – it’s you sending data to the server instead of requesting it (although in HTTP terms it’s still considered a “request” and it still generates a response). If you’ve ever filled out a web form and submitted it, and I’m sure you have, you’ve sent a POST to the server. You can actually use POST for just about anything involving sending data, and there are plenty of websites that use it exclusively to perform Create, Update, and Delete actions on the server, but that’s not how we’re going to go. We’re going to use POST for creating new items, PUT for updating existing items, and DELETE for … yeah, that one’s obvious. This fits in with general RESTful good practices, and it also makes the code a little easier to read.

So, right, the code … let’s open /app.js and take a look at line 24:

app.use('/', index);

This is telling our app that when a user sends any HTTP request to the top level of the site, it should use our “index” router. That means the router should be prepared to handle any traffic we expect. For our index, that’s only GET … we’re not going to be POSTing, PUTting, or DELETEing anything at the top level. So, back to /routes/index.js, and look at line 5:

router.get('/', function(req, res, next) {

This is specifically saying “if a browsers sends an HTTP GET request to the top level, run the following function,” and then providing a function that renders /views/index.ejs with a local variable set, as we covered previously.

For a web page, that’s great. We want to render views and send back the resulting HTML, and we’ll be using /views/index.ejs as the entry point into our React app. For an API, though, we don’t want to send back HTML. We want to send back JSON. So we’re going to build a test function to do that. But first, very quickly, let’s convert this file to ES6 (we’ll do app.js shortly, for consistency). All that requires is changing the file to look like this:

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', (req, res, next) => {
  res.render('index', { title: 'Express' });

module.exports = router;

As you can see, we switched two variables that never change to const, and we’re using the slightly more concise arrow syntax for our anonymous functions. Now, add the following code above the final module.exports line:

const testJSON = [
    name: 'John Smith',
    username: 'CaptainCode'
    name: 'Jane Doe',
    username: 'JaneyCakes'

Hopefully this is obvious, but we’re adding another variable, using const since this data doesn’t change either, which is an array full of a couple of fake user objects. Below that, write the following code:

router.get('/sendjson', (req, res, next) => {

As you can see, that code is saying “if we receive an HTTP GET request to top-level-slash-sendjson, send our testJSON data as JSON by using res.json instead of res.render (since we’re not rendering a view).

OK, save the file, and then start (or restart, if it was already running) our node server. Then navigate to localhost:3000/sendjson

… there we go! Delicious, correctly escaped JSON. Now, of course, with our API, we won’t be viewing this JSON in the browser. We’ll be ingesting it via our React app and then doing stuff with it there. We’ll get to that.

In the next tutorial, we’re going to do three things: ES6-ify our app.js, install nodemon so we don’t have to keep restarting our server all the time, and get our API directory set up. See you there!

« Previous Tutorial Next tutorial »