Create React App with an Express Backend

4 min readApr 19, 2017

If you haven’t heard of it yet, Create React App is an awesome way to get started with React. It creates a project structure for you, all set up and ready to go. You get to skip the configuration of Webpack and Babel, and get right down to writing your app.

But what if your app isn’t purely frontend? What if you need to connect to a backend server? Create React App has you covered.

In this post we’ll set up a React app alongside an Express backend app, and wire up the UI to fetch some data from the backend.

And, if your backend is not written with Express, don’t worry! This same process will work for you too (skip to the Configure the Proxy section).

Let’s get into it.

Create the Express App

We’ll need an Express app first off. If you have one already, you can skip this step.

For the purpose of this post, we’ll generate one with the express-generator utility. Install the generator:

$ npm install -g express-generator
  # or: yarn global add express-generator

Then run it to create the Express app:

$ express react-backend

It’ll create a react-backend folder. Then make sure to install the dependencies:

$ cd react-backend
$ npm install   # or yarn

We can ignore most of the generated files but we’ll edit the react-backend/routes/users.js file as a simple way to return some data. Here’s the change we’ll make:

That’s all we’ll do with Express. Start up the app by running this in the terminal:

$ PORT=3001 node bin/www

Leave it running, and open up a new terminal. Note the PORT variable: this Express app will default to port 3000, and Create React App will also default to port 3000. To avoid the conflict, start Express on 3001.

Create the React App

You can put the React app anywhere you like. It doesn’t need to be a subfolder of the Express app, but that’s what we’ll do here to keep things organized.

First things first, make sure you have create-react-app installed if you don’t already:

$ npm install -g create-react-app

Then, from inside the react-backend folder, create the React app:

$ create-react-app client

Configure the Proxy

This is the key change that will let the React app talk to the Express backend (or any backend).

Inside the React app’s folder (client), open up package.json (make sure it’s not Express’ package.json – it should have things like “react” and “react-scripts” in it). Under the “scripts” section, add the “proxy” line:

The port (3001) in the “proxy” line must match the port that your Express server is running on.

Note that this can point to any server. It can be another local backend in Java or Python, or it could be a real server on the internet. Doesn’t matter.

The way this works is, any time your React app makes a request to something that’s not a static asset (not an image or CSS or index.html, basically), it will forward the request to the server specified in "proxy".

Once this is done, start the React development server by running npm start (or yarn start).

Fetch the Data from React

At this point 2 servers are running: Express (on port 3001) and Create React App’s Webpack dev server (on port 3000).

Let’s make a call to the /users endpoint and make sure the whole pipeline is working.

Open up client/src/App.js and tweak it to look like this:

The changes here are:

Setting an initial state at the top: an empty users array will prevent the this.state.users.map from blowing up before the users are loaded.
Changed render to render the list of users.
Added componentDidMount to get the data using fetch, and save them in state.

Create React App comes with the fetch polyfill built in so you’re all set even if the user’s browser doesn’t natively support it.

Now Deploy It To Production!

Check out Part 2, Create React App with Express in Production where we build an Express+React app and deploy it to Heroku.