Connecting React frontend and Node.js backend at Heroku

Try putting your server files in the root directory folder and everything else in a client folder within the root:

1.) Put your server.js into the root directory

2.) Add these commands to your root package.json...

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "proxy": "http://localhost:4242/"

3.) Create a client folder and put your src and public folders in it.

4.) Add these commands to your client folders package.json...

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Your file structure from root should look like this:

Root
  client
    Public
    Src
    package.json
  server.js
  package.json

5.) Move all your server-related stuff into the root folder, that way, you don't have to cd into any nested folders.

Add a Procfile to your root folder that says something like:

web: node server/index.js -port 8000

And a small addition to the scripts part of your package.json that tells Heroku that once it's fetched all the dependencies for your project it should build it, although that may not be necessary now.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-postbuild": "npm run build"
},