Node.js & React Part 1

Installing Node and running a Node server

Part 1: Installing and Running a Node Server
Part 2: Serving a React app from Node
Part 3: Building a Universal React App

I am going to set up a React + Node environment and thought I’d take some brief notes and put them online for future reference. In this first post I’m going to install Node and set up a basic server. In my next post I will set up a React build environment and have the Node server serve the React app.

The source code can be found in this GitHub repo.

Install Node

First we will create a new folder then navigate into it.

mkdir node-react 
cd node-react

Now we need to install Node. Install nvm per the docs

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.27.1/install.sh | bash

After installing, nvm will prompt you to close and reopen your terminal.

Let’s install Node 4.0.0 (latest at the time of this writing, and also has the latest V8 which supports many ES6 features).

nvm install 4.0.0

Verify that your install worked by running the node REPL.

node
> console.log('hi');
hi

To quit the node REPL, hit Ctrl+C twice or type ‘.exit’ and hit enter.

Node Server

Create a package.json file using npm init.

npm init 

Let’s use the popular web framework Express. First, follow the installation instructions. The key step is:

npm install express --save

Now we’ll use the Hello World example but let’s sprinkle in a bit of ES6 syntax.

'use strict';
const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('React app will go here');
});
const server = app.listen(9000, () => {
  let port = server.address().port;
  console.log(`Server running at http://localhost:${port}`);
});

The “use strict” directive at the top of the file allows us to play with ES6 in Node.

To run this, from the same ‘node-react’ folder run

node server.js

In your terminal you should see

Server running at http://localhost:9000

and in your browser at http://localhost:9000 you should see

React app will go here

Recap

In this post we installed Node and set up a very simple Node server. Next time we’ll start playing with React. You can click here to jump to the next post.