Create React App with an Express Backend

Create #ReactJS App with an Express Backend:  by @dceddia #JavaScript

  • 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.
  • Note the variable: this Express app will default to port 3000, and Create React App will also default to port 3000.
  • First things first, make sure you have installed if you don’t already:

    Then, from inside the folder, create the React app:

    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 ( ), open up (make sure it’s not Express’ package.json – it should have things like “react” and “react-scripts” in it).
  • At this point 2 servers are running: Express (on port 3001) and Create React App’s Webpack dev server (on port 3000).

Learn how to forward API requests from Create React App to any backend with the proxy setting.

@HappyFunCorp: Create #ReactJS App with an Express Backend: by @dceddia #JavaScript

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.

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:

Then run it to create the Express app:

folder. Then make sure to install the dependencies:

file as a simple way to return some data. Here’s the change we’ll make:

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

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.

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.

installed if you don’t already:

folder, create the React app:

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

(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 like this:

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.

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

endpoint and make sure the whole pipeline is working.

and tweak it to look like this:

The changes here are:

support yet, you’ll need to install the polyfill. See here for which browsers currently support fetch.

There’s also further reading if you’re wondering how to do AJAX in React or why the fetch is in componentDidMount instead of componentWillMount.

Now you’re a pro at hooking up a CRA-generated app to any backend you can throw at it! Got more questions? Want to see something else? Leave a comment below.

Create React App with an Express Backend