Introducing Express React Starter

Published in

Burke Knows Words

5 min readJul 20, 2017

I recently figured out the hard way that using create-react-app with Express is not as straightforward as one might think. Or maybe it is, and I just don’t think like everyone else. In any event, I created a starter project which scaffolds out a single project with all of the plumbing already taken care of.

Prerequisites

create-react-app

Get Started

First, clone the starter repo into a folder of your choosing and run npm install.

git clone git@github.com:burkeholland/express-react-starter.git your-app-namecd your-app-namenpm install

That’s it! You are ready to roll.

Thanks to John Papa who discovered that there is a known issue with create-react-app and npm version 5. If you are receiving an error about import-es-lint, you can run the following command as a workaround.

npm i eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-flowtype --save

Running In Development

To run the project in development, first fire up the Express Server which runs on port 3001.

node server/server.js

You can optionally just pop into the server folder and run npm start.

In a new tab, start create-react-app which runs Webpack in memory for 🔥 reloads — port 3000.

npm start

It’s worth noting that you can run both at the same time and in the same tab in the terminal.

node server/server.js & npm start

Express will run in the background but logs will still be piped through to the terminal.

This doesn’t seem to work so well in the Visual Studio Code integrated terminal and may orphan processes which you will have to manually kill.

A browser tab should open up automatically where you will see the standard create-react-app start screen. With one very important difference.

Check out App.js and you will see a fetch call to /api/message.

All calls to /api are sent back to Express. The file in the routes folder handles all of these requests.

How Does This Work?

If you open up the folder, you will see that it’s just a create-react-app project, so if you’ve used that before, the folder structure will be familiar. The only different item will be the addition of a “server” folder.

The Express server is controller by the server/server.js file, which loads the server/app.js file. It’s in this app.js file that the path for all request made to the URL “api” are matched. Any requests that don’t start with “api” get sent to build/index.html.

Express and Webpack are running on different ports. In order to fool Webpack into thinking that they aren’t, we specify a proxy setting in the package.json file.

Proxy is something that create-react-app supports out of the box. We point that proxy at Express running on port 3001 and everything “just works”. The proxy only applies to requests that do NOT have an accept: text/html header. This roughly means that it only proxies ajax calls, not http calls from the browser. And in fact, if you inspect the request, even the browser doesn’t know that it’s sending the request to port 3001. It thinks all the action is over on 3000.

In this way, you can build your routes in Express, connect to data, validate requests and the like while keeping all of the functionality of Webpack hot reloads.

And when you are ready…

Deploying To Production

To run in production, simply build the web app portion.

npm run build

The build is configured to by moved automatically to the “server” folder. It’s this server folder that ultimately should be deployed to production.

Deploy To Azure

This template is also ready to be deployed to Azure. If you inspect the “server” folder, you will notice the presence of a web.config. The point of this file is to make it easy to deploy to Azure, and there are a few ways to do that.

First make sure that you have a Web App Service instance ready to host this app. Sign up for a free trial account if you don’t already have one.

FTP

The easiest way to deploy this app is simply to FTP the contents of the “server” folder. To connect via FTP, download your publishing profile and then find the ftp url, username and password.

Make sure the app gets restarted in the portal.

It is also possible to publish via a CI service which pulls from Github, does npm install and runs a build, but that is another post for another time.

I hope that this template is helpful. I would like to iterate on it more as I continue to learn about how people would prefer their applications to be structured on disk. Feel free to tell me all about it.

Thanks to John Papa who figured out a lot of this in his quest to accomplish the same task with the Angular CLI. Much of this is based on his work.