title: Heroku - Express and React app showing blank screen when deployed
body: <p>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.</p>
  
  <p>I am getting this errors in the browser console: </p>
  
  <pre><code> Uncaught SyntaxError: Unexpected token &lt; 1.b1e0c624.chunk.js:1
   Uncaught SyntaxError: Unexpected token &lt; main.48d62be5.chunk.js:1 
   manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.
  </code></pre>
  
  <p>Here is how my <code>server.js</code> file is setup to send the root <code>index.html</code> file:</p>
  
  <pre><code>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);
      }
    });
  });
  </code></pre>
  
  <p>And this is what the top portion (code redacted for brevity) of my React apps <code>package.json</code> looks like:</p>
  
  <pre><code>{
    "name": "client",
    "version": "0.1.0",
    "homepage": "https://radiant-tor-66940.herokuapp.com/",
    "private": true,
  }
  </code></pre>
  
  <p>I figured setting the homepage in the client's <code>package.json</code> 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. </p>
  
  <p><strong><em>Update</em></strong></p>
  
  <p>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:</p>
  
  <pre><code>{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}
  </code></pre>
  
  <p>This error above is being sent from the error block in this code:</p>
  
  <pre><code>app.get('*', function(req, res) {
    res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
      if (err) {
        res.status(500).send(err);
      }
    });
  });
  </code></pre>
  
  <p>I have changed my <code>server.js</code> file to serve the <code>index.js</code> file like this versus using a template literal (trying anything at this point):</p>
  
  <pre><code>    //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 =&gt; {
        if (err) console.info(`Error: The server failed to start on ${port}`);
        else console.info(`****** Node server is running on ${port} ******`);
      });
  </code></pre>
  
  <p>This is the root level <code>package.json</code> for my server. I have added the <code>heroku-postbuild</code> script to build the React app located in <code>client</code>:</p>
  
  <pre><code>      "scripts": {
          "test": "jest",
          "start": "node server/server.js",
          "heroku-postbuild": "cd client &amp;&amp; npm install --only=dev &amp;&amp; npm install &amp;&amp; npm run build"
        },
    "engines": {
      "node": "~9.10.1",
      "npm": "~5.6.0"
    }
  </code></pre>
  
  <p>Here is the <code>package.json</code> for the React app located in <code>/client</code>:</p>
  
  <pre><code>{
    "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": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ],
    "proxy": "http://localhost:8000/"
  }
  </code></pre>
  
  <p>Here is what the files looks like on the Heroku server:</p>
  
  <p>1st image: Root Directory
   2nd image: /client directory
   3rd image: /client/build directory
   4th image: /client/build/static directoy</p>
  
  <p><a href="https://i.stack.imgur.com/GkWB4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GkWB4.png" alt="Root Directory"></a></p>
  
  <p><a href="https://i.stack.imgur.com/YszQT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YszQT.png" alt="/client Directory"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9ldph.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9ldph.png" alt="/client/build directory"></a></p>
  
  <p><a href="https://i.stack.imgur.com/daBYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/daBYK.png" alt="/client/build/static directory"></a></p>