Simplest and Fastest React Express App Setup

React and Express setup doesn’t have to be complicated. They both come with a project generator you can run from the command line that creates all the basic file structure you need.

Since an npm update in 2017, you can run the latest version of these generators using npx . In your OSX/Linux terminal just run the following commands:

mkdir node-react-app && cd node-react-app
npx create-react-app client
npx express-generator backend --no-view
cd backend && npm install

Create-react-app is maintained by the creators of React, Facebook, and is the standard way of starting a React project. Under the hood, it seamlessly manages Webpack, babel, yarn, and eslint for a configuration that suits most needs. And best of all, there is no lock-in so you can eventually edit the underlying configurations if you want something more complex.

Express generator is a similar tool maintained by the creators of Express. It usually comes with its own jade or ejs frontend, but this can be avoided with the --no-view flag. Unlike create-react-app, the dependencies aren’t immediately installed and so we must npm install.

Now, there are two issues to deal with.

First, both generators default to run on port 3000. In the backend, app.js handles the main application logic, but bin/www handles the port allocation. To change the default port in bin/www, you change the following line:

//FROM
var port = normalizePort(process.env.PORT || '3000');
//TO
var port = normalizePort(process.env.PORT || '3001');

Secondly, the React app runs on port 3000 but needs to send API requests to the backend on port 3001. The naive approach would be to directly send API requests to localhost:3001.

Let us see what happens with this approach. Go to each folder into two separate terminals and run the backend with yarn start and the client with npm run start. Then, add the following in client/src/App.js:

fetch('http://localhost:3001/users')
  .then(response => response.text())
  .then(data => console.log({data}));

Checking the console, you will find a CORS error.

You could fix the CORS issue directly, but this will eventually produce problems in production when the client is not accessing localhost, but your domain. Luckily, create-react-app comes with a simple fix. In client/package.json add the following line:

"proxy": "http://localhost:3001"

Now, you can change the fetch to:

fetch('/users')
.then(response => response.text())
.then(data => console.log({data}));

When the server refreshes you will see a successful connection to your backend! Congrats on successfully connecting React and Express!

xtras:

To allow easy running of both projects simultaneously, you can use the npm package concurrently. In the main node-react-app folder, run the following commands:

npm init -y
npm i concurrently

Now in the package.json under scripts, add the following line:

"start": "concurrently \"cd backend && npm run start\" \"cd client && yarn start\"",

Now in the main folder, you can simply run npm run start to get both applications up and running.