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

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

Answer 1

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"
...

Answer 2

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"
},

Answer 3

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.