Whilst setting up a test app myself, I couldn't find a simple way to deploy Create React App with Express on the same server. It took some tweaking, so here are the steps if you want to do the same.

Please note: These steps assume you want to run your app server and your API's from the same place. This is useful if you want to deploy simply to something like heroku.

Read this if you've not worked with create-react-app before: If you've not yet worked with create-react-app it has two modes of serving: from a hot-reloader which is launched with npm run start and an optimised production bundle which is a standard index.html that you can serve in any way you desire. I wanted a way to have the npm run start method and the npm run build method to work in the same way with my API, one way to do this is with the proxy setup I'm about to take you through.

Step 1: Install create-react-app

    create-react-app your-app-name

Step 2: Install packages for create react app

 npm install; 

Step 3: Install express

npm install express --save

Step 4: Create a server.js file

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/ping', function (req, res) {
 return res.send('pong');
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

Step 5: Update your package.json

Add the following to your package.json

"proxy": "http://localhost:8080"

If you didn't do this we would have to create slow production builds every time (rather than the faster for development npm run start method). This is because npm start uses port 3000, which is not the same port that the express APIs are running on (8080).

Step 6: Start the express server

node server.js

Or nodemon if you prefer.

Step 7: Start your react app

Keep node running, do this in a separate tab/ window.

npm start 

Start the react build with hot reloading.

Conclusion

Now you can develop all you want on localhost:3000 by using npm run start and your API's will work as expected (despite requests coming from port 3000).

When you want to deploy, just run the production build npm run build and serve your app from localhost:8080, which is node server.js in this example (note the port number at the bottom of server.js).

Profit.

Lou is the editor of The Cloud Native Software Engineering Newsletter a Newsletter dedicated to making Cloud Software Engineering more accessible and easy to understand, every 2 weeks you’ll get a digest of the best content for Cloud Native Software Engineers right in your inbox.