« Previous Tutorial Next Tutorial »

We’re pretty well set up at this point to create our React app. We’ve got text editors, databases, github repos, and so forth … now it’s time to start building. We’re going to be using a Node.js-based web server called Express as the foundation of our application. At its core, Express is pretty straightforward, but there’s a lot to tackle up front if you want to really understand what it’s doing and how to work with it.

We’ll be using several third-party modules to make our life easier when it comes to things like data modeling and management, but before we dive into that, let’s get Express installed and running. In the followup tutorial, we’re going to go over the files it installed, but don’t worry – we’ll keep it straightforward.

The first thing we’re going to install is a generator for Express. If you just install Express, you get the core webserver, but nothing to command it. Express-generator makes life a little easier and provides a great platform on which to build an app. To install it, we need to add it as a global module. This means it won’t live in our project directory, but will instead be installed with and accessible by our main node installation. Reminder that if you change versions with NVM, you’ll have to reinstall any global modules you want. They’re version-specific.

IMPORTANT NOTE: this tutorial and those that follow use very specific versions of Express and various other node modules. It's vital that you use the same versions in your code, as future updates can and will break these tutorials. The purpose of this course is not to sit on the bleeding edge of these technologies, but to get you comfortable with the entire Node/React ecosystem, and able to then pursue upgrade strategies using the knowledge you've gained to assess the changes which may break your code. All module installations in the following tutorials will come with specific version numbers.

Open a terminal or command prompt and type the following:

yarn global add express-generator@4.15.5

It’ll do its thing. After that, it’s time to install the actual webserver. By the way, if you still have that test.html file in your /musiclist folder you can go ahead and delete it. We won’t be using it. Change to whatever directory is holding /musiclist (in my case, ~/web) and type the following:

express -v ejs -f musiclist

Which says “install express using EJS as a view engine in the musiclist folder, even though there’s already some stuff in there.”

Let’s talk real quick about view engines. By default, Express uses a view engine called Jade for its templates. Jade is out of date and has now been renamed Pug,. You can manually install that if you want, but I don’t particularly like it. It uses a simplified, indent-based syntax, and in general I am deeply unfond of indent-based code. There’s nothing less fun than hunting a bug for half an hour only to discover that it’s because you accidentally added an extra space on one line. I used Jade for my original tutorials, but I found it more cumbersome than helpful, and one of the most-asked questions I got was “how do I just use this with HTML instead of Jade?”

Well, the answer to that question is “You can’t,” because regular HTML has no way of parsing the server data that Express includes when you make an HTTP request. The good news is, we can use EJS, which has an entirely HTML-like syntax, with simple JavaScript blocks for parsing. Like this example from their homepage:

<ul>
  <% for(var i = 0; i < supplies.length; i++) {%>
    <li><%= supplies[i] %></li>
  <% } %>
</ul>

Anyway, this is all pretty academic, because the amount of EJS we’re going to be writing is extremely minimal. We only need one page to serve our single-page React app.

Let’s try to run our webserver. Type:

yarn start

and hit enter. Nope, that doesn't work. That's because we installed stuff into the musiclist directory, but we're still sitting in the parent directory. Change into you musiclist directory and try again:

yarn start

D’oh … that gives us a gigantic, scary-looking error. The thing is: Express is a node module, and we haven’t actually installed those. We have a few control files, but not the actual server app, so it can’t start up. Type:

yarn

and hit enter. This will install all of the modules defined in the package.json file that the Express installation created (more on that soon). Let that run its course and, once it’s done, type

yarn start

This runs a script located in the “www” text file at /bin that starts our server (why is a text file located in /bin? I have no idea!). Assuming you don’t have anything else running on port 3000, your server should start right up. You won’t really see much in the terminal … it’s time to hit http://localhost:3000 and take a look at the somewhat underwhelming “Welcome to Express” Page.

Don’t worry. We’ll be improving that soon, but first we need to learn more about Express. Before we dive into any code, let’s talk about requests and responses, which sit at the core of how Express handles serving websites. Every time you load up a web page, you’re making a request to the server. This request can contain a whole bunch of information, not just the URL you want. It can, for example, contain data about which user is making the request. You can then, on the back-end, tap into the request object—which is always represented in Express as “req”—and get at the user data, in order to check, for example, that the user has administrator privileges required to view a certain page.

Response—which is always represented in Express as “res”—is what the webserver sends back after you make your request. This typically includes the HTML that makes up the page, but it can also include other data, just like the request. Request and response is the core way that the HTTP protocol works. All browsers make requests and parse responses, no matter what the website is or what it uses as a backend. We’ll be working with req/res a lot when we build our API, and that’ll give lots of opportunities for us to get familiar with it.

That’s all for this tutorial. In the next one, we’re going to dig into all these files and talk about what they do. See you there!

« Previous Tutorial Next Tutorial »