I created a Github project with combined server (Node.js) and UI (React) for a simple web app trying to learn the MERN stack. The app builds fine and Heroku brings up the "Up" state as well. I have tried to deploy the app to Heroku but weirdly I only see the server side components rendered. The ui doesn't come up. Would you have any suggestions for what I'm doing wrong/missing?

The folder structure:

.
|- package.json
|- server/
|  |- src/
|  |- package.json
|  |- tsconfig.json
|- ui/
|  |- src/
|  |- package.json
|  |- tsconfig.json

The relevant contents of my files are as follows:

./package.json

{
  "scripts": {
    "build": "cd ui/ && npm install && npm run build",
    "start": "cd server/ && npm install && npm start"
  },
}

./server/package.json

{
  "main": "src/server.ts",
  "scripts": {
    "clean": "rimraf build",
    "build": "npm run clean && tsc",
    "start": "npm run build && node build/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

./ui/package.json

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

CodePudding user response：

You can't simply push a monolithic repository containing a frontend and backend application to Heroku.

Deploying Node.js apps, Heroku expects a start script in your package.json to execute a single process. In your case, this starts the ExpressJS server by using ./server/package.json. This is fine, however you can't start your React application simultaneously.

What you can do is serve your React app from the ExpressJS server. The steps are:

• customize the Heroku build process using a heroku-postbuild script to build the React code to the location where it is served from later
• have a middleware set up to statically serve your React application from the location you specified as the build location app.use(express.static(path.resolve(__dirname, "./client/build")));

For further details, read this post.