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.

Ashlynashman

Answer 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!

Smitty

This is not true, see my below answer https://mcmap.net/q/1071702/-heroku-how-to-deploy-a-node-app-with-client-and-server-running-on-different-ports – Haire

@MarkJackson Building react app and serving it as static field is always an option. Not sure if it makes my answer untrue. I'll update it anyways to present the bigger picture. – Smitty

Answer 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.

Haire

Answer 3

Actually you must not want to run on different ports. because of cors and other issues. Implement proxy in nodejs OR implement nginx as a gateway for both server and client requests.

Sayette