Using Create-React-App with Express 
Tags: javascript, react, express, node
Published: 2017-09-12 17:49:51

---
title: Using Create-React-App with Express 
published: true
description: Simple steps to use create-react-app on an express server.
tags: javascript, react, express, nodejs
---

Whilst setting up a test app myself, I couldn't find a simple way to deploy [Create React App](https://github.com/facebookincubator/create-react-app) with [Express](https://expressjs.com/) 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](https://newsletter.thedevcoach.co.uk) 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.