Seeing a blank page on deploying create-react-app application to heroku

Question

No webpack config since I have not ejected. I'm seeing an empty root div. This is my package.json

{
  "name": "ttt",
  "version": "0.1.0",
  "homepage": "https://tictactoezz.herokuapp.com/",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.2"
  },
  "scripts": {
    "start": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is my server/server.js

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '../public');
const port = process.env.PORT || 3000;
app.use('/static', express.static(publicPath));
app.get('*', (req, res) => {
   res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
   console.log('Server is up!');
});

Please help! Unlike other questions posted here, I do not see any errors in the console.. just a blank screen. It works on localhost:3000

Check your Heroku error logs – sibasishm Aug 13 '20 at 05:31 — sibasishm, Aug 13 '20 at 05:31
did you ever solve this? – Dashiell Rose Bark-Huss Apr 03 '21 at 01:25 — Dashiell Rose Bark-Huss, Apr 03 '21 at 01:25

score 0 · Answer 1 · answered Aug 13 '20 at 05:25

0

You don't need to have server.js for heroku deployment if you use create-react-app. In case you insist to have server.js, it should point build folder, not public folder. You need to run npm run build first and then server.js should server contents on build folder. You can add a new script for heroku-post-build.

...
"heroku-postbuild": "npm run build"
...

answered Aug 13 '20 at 05:25

Hayden S.

742
4
10

Yep, I realized that and then got this problem: https://stackoverflow.com/questions/61558585/heroku-content-not-from-webpack-is-served-from-app-public-despite-using-all-d – ashish paralkar Aug 13 '20 at 05:42

score 0 · Answer 2 · answered Aug 13 '20 at 05:32

It doesn't look like your start script includes building the react app. Can you try this?

"scripts": {
    "prestart": "npm run build",
    "start": "node server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

score 0 · Answer 3 · answered Nov 06 '21 at 19:19

I have struggled with the same problem for two days. Express&React.js app was working fine on localhost but not on heroku. I added this to server.js and problem solved.

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

My react.js folder had the name "frontend" and it was at the same level with my server.js file. And don't remove build name and dont change it to any other name. build is a default folder for your react app to launch.

Seeing a blank page on deploying create-react-app application to heroku

3 Answers3