Your React client will run in development mode by default. When you want to deploy to a live server, you must build the front-end and serve the static files.

// build the client
cd client && npm run build

// serve the client
npm run serve

You can run this file before you deploy or set it as a post-build script in package.json if your hosting provider supports post-build scripts. Gravity includes the Heroku post-build script for you already.

Running The Client & Server Together

If you want to serve the static files in the same production environment as your server, you will need to add the following lines to server.js

// serve static files in production
if (process.env.NODE_ENV === 'production'){

  app.use(express.static(path.join(__dirname, 'client/dist')));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/dist/index.html'))

Environment Variables

You must ensure you set up your environment variables in your production environment.

Heroku Deployment Tutorial

Last updated