« Previous Tutorial Next Tutorial »

Welcome back to Five Minute React. In our last tutorial, we went over the top-level files that Express-Generator installed. Now we’re going to look into the directories. If your server isn’t still running from the last tutorial, make sure to start it up by typing

yarn start

in the /musiclist directory.

Let’s start by opening /bin/www. Don’t let the use of /bin fool you: this is not a binary file, but rather a simple text file containing some information our Express server uses to start up. We’re not going to spend much time on this file, because we’re not going to touch anything in it. You could manually edit the port your server runs on here, but it’s better to set it as an environment variable, which is referenced on line 15 by process.env.PORT. I won’t be talking about how to set environment variables until a later tutorial, so if you really don’t want to use 3000, go ahead and change the number on that same line and save the file. Note: you will have to restart your server by hitting cmd-or-ctrl-c and then re-typing yarn start if you make any changes here.

Everything else in this file is just getting the server to start up and listen for HTTP requests, and handling errors that may occur in that process (not HTTP errors like 404s, or running server errors like 500s, but ones that occur in the actual process of trying to start up the server).

Close this file and let’s look at the /public directory. This folder contains three sub-folders, images, javascripts, and stylesheets. The images folder is empty, the javascripts folder is empty, and the stylesheets folder contains a very basic CSS file that we’re going to be nuking when we set up our MusicList CSS.

All right, let’s move on to /routes. This is an important folder – it holds the files that contain middleware functionality that’s called when you hit a particular route that’s defined in app.js. These functions let you access data in the request, prepare the response, and return it to the browser. Open index.js and take a look.

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

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

module.exports = router;

It’s short and to the point: it pulls in Express and router functionality via a couple of requires, then jumps right to responding to an HTTP GET at the top level by running a function that renders a view.

Just to clarify a bit, see that res.render on line 6? That’s saying “Render the index view in our views folder, and include a local variable called title, with the value of ‘Express.’” – that res.render ends the sequence, which you can also tell because the next() function is never called. We’ll work more with these routes in coming tutorials.

Let’s open the corresponding view right now. We want /views/index.ejs, which is another short and simple file.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

As you can see, it’s mostly HTML, but there are three repeated instances of weird percent-equals tags with “title” in them. Those are EJS control blocks, and they let you do two things. If you have the equals sign, they render variables as text, which is what we’re doing here. If you just have the percent signs, then they let you execute javascript within your templates. Let’s do that real quick by adding a second set of paragraph tags below the first, and then writing a little JavaScript.

    <p>
      <% var randomNumber = Math.floor(Math.random() * 100) + 1; %>
      <%= randomNumber %>
    </p>

This will generate a random number between one and one hundred, and print it out.

Now switch back to index.js in /routes for a second. Remember that local variable being set, called title, with a value of Express? … well, let’s change that to MusicList and see what happens when we refresh the page.

The answer is “nothing” … well, not nothing, since we’re seeing our random number now, but the reason the title didn’t change is because the Express server doesn’t recognize changes to .js files without a restart. This can be tedious, and in a couple tutorials we’ll be installing an app called Nodemon which auto-detects changes and restarts the server when they happen, but for now just kill and restart. Now when we refresh, we see that the new value in our title variable is showing, along with our random number. Hooray!

/routes/users.js is basically the same as index.js, except instead of rendering a view it just responds with plain text. I suggest deleting this file, along with the lines referencing it in app.js. We’re going to be organizing things a little differently.

/views/error.js is a simple view that gets returned by the error middleware in app.js, which we covered in the last tutorial. I’d leave it for now, since it’s handy for displaying stack traces. If you want to see it in action, just try to navigate to a page you know isn’t there, and you can see the 404 error it prints out.

That’s about it for the stuff Express auto-installed for us. It’s only a little bit of scaffolding, but a little bit is all we need. React is going to be handling the heavy lifting when it comes to the display side, and our route files will be dealing with the API, along with some model files, which we’ll get to.

We’re all set here. In the next tutorial, we’re going to talk more about Express routes, and how to string multiple actions together using that next() function that Express provides. See you there!

« Previous Tutorial Next Tutorial »