Heroku: How to deploy a node app with client and server running on different ports?

Question

I have a nodejs API as server and React/Redux app as client located in one git project: https://github.com/lafisrap/fcc_nightlife.git

I want to deploy it on Heroku using the heroku cli.

The scripts section in package.json is:

  "scripts": {
    "start-dev": "concurrently \"yarn run server\" \"yarn run client\"",
    "start": "yarn run server | yarn run client",
    "server": "babel-node server.js",
    "client": "node start-client.js",
    "lint": "eslint ."
  },

start-client.js:

const args = [ 'start' ];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('yarn', args, opts);

In the client folder I have another package.json which defines the client. The scripts section of it:

  "scripts": {
    "start": "react-scripts start",
  }

I did:

heroku create
git push heroku master

The api is running fine. But I don't know how to start/access the client.

Solution 1

You CAN NOT deploy two services in one Heroku app. In short, you have to deploy them to separate Heroku dynos to deploy two apps.

More information is provided in this stackoverflow answer to a similar question.

PS: It is always an option to serve JS files from your API server after building React files.

Hope this helps!

Solution 2

This repo shows the setup of Node.js serving up a React frontend running on a single Heroku dyno: https://github.com/mars/heroku-cra-node I was able to get one up and running using this as a guide.