Heroku - Express and React app showing blank screen when deployed

Question

I am having a difficult time trying to figure out what is going on here. When I deploy my React/Express app to Heroku, everything builds and deploys with no errors, but my React frontend is completely blank.

I am getting this errors in the browser console:

 Uncaught SyntaxError: Unexpected token < 1.b1e0c624.chunk.js:1
 Uncaught SyntaxError: Unexpected token < main.48d62be5.chunk.js:1 
 manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

Here is how my server.js file is setup to send the root index.html file:

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

app.get('*', function(_, res) {
  res.sendFile(path.join('/app/client/build/index.html'), function(err) {
    if (err) {
      console.log(err);
      res.status(500).send(err);
    }
  });
});

And this is what the top portion (code redacted for brevity) of my React apps package.json looks like:

{
  "name": "client",
  "version": "0.1.0",
  "homepage": "https://radiant-tor-66940.herokuapp.com/",
  "private": true,
}

I figured setting the homepage in the client's package.json would do it but nothing. I am really unsure what to do here. I am thinking that something might be off with a path or something like that.

Update

This is still an issue for me. Below I have shared more code in hopes that this is can aid in my case. I am getting a new error this time when the page loads:

{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}

This error above is being sent from the error block in this code:

app.get('*', function(req, res) {
  res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

I have changed my server.js file to serve the index.js file like this versus using a template literal (trying anything at this point):

    //Express
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8000;
    //Core Node Modules
    const fs = require('fs');
    const path = require('path');

    //Middleware
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

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

        app.get('*', function(req, res) {
          res.sendFile('index.html', { root: __dirname }, function(err) {
            if (err) {
              res.status(500).send(err);
            }
          });
        });

    app.listen(port, err => {
      if (err) console.info(`Error: The server failed to start on ${port}`);
      else console.info(`****** Node server is running on ${port} ******`);
    });

This is the root level package.json for my server. I have added the heroku-postbuild script to build the React app located in client:

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

Here is the package.json for the React app located in /client:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

Here is what the files looks like on the Heroku server:

1st image: Root Directory 2nd image: /client directory 3rd image: /client/build directory 4th image: /client/build/static directoy

Answer 1

The issue was in my server.js file.

Originally it was express.static(path_join(__dirname, '/client/build'))

it needed to be: express.static(path_join(__dirname, '../client/build'))

This is the case because my server.js file is located in /server and it was trying to find /client/build inside of /server instead of the root app directory on Heroku.

Answer 2

As we don't have access to your server, it's hard to tell the reason behind your problem. I would guess you misconfigured your express server as those three error messages indicate, that the server only returns the index.html file.

And as HTML is not valid Javascript, you get unexpected token errors.

I would also guess, that the following line has no effect at all, which means there are no files in this folder (or not those you want to access).

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