React app stays blank with Express to deploy to Heroku - node.js

Question

I can't figure out how to get my react app (created with create-react-app) to work when deploying to heroku.
Without heroku everything works fine. I use npm start which uses react-scripts start to start the react app and everything works locally as expected.
Now that I want the app to run on heroku I have to use express to serve it's content to the client. I tried this but sadly my browser stays blank. Just a white screen, nothing else. Not even error messages?! Neither in the console nor in the browser's console.
My server's structure looks like this:
public
favicon.ico
index.html
manifest.json
etc...
src
App.css
App.js
index.css
index.js
etc...
package-lock.json
package.json
Procfile
server.js
Here is my server.js file:
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'src')));
app.get('/', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Server is running on port ' + port);
});
Is there any mistake in the file? Or do I maybe use a wrong method to start the server?
I've seen people using node server.js, some run node server.js in one terminal and npm start in another terminal. And some others run just npm start but changed the start script in the package.json to node server.js. I think I am confused at this point. What's the difference between all those commands?
And what could I do to solve the problem? Can anyone help me? Or do you need any additional code insights to help me?

Answer 1

My server.js
const express = require('express');
const http = require('http');
const path = require('path');
let app = express();
app.use(express.static(path.join(__dirname, 'build')));
const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on :${port}`));
My Procfile as per heroku:
web: node server.js
Please note that you should have build folder where the production would be picked up by heroku. In addition package.json.
My package.json
{
"name": "my-app",
"version": "3.0.1",
"main": "index.js",
"license": "MIT",
"dependencies": {
"#amcharts/amcharts4": "^4.0.3",
"#amcharts/amcharts4-geodata": "^4.0.27",
"#babel/runtime": "7.0.0-beta.55",
"#date-io/moment": "^1.1.0",
"#material-ui/core": "^3.8.1",
"#material-ui/icons": "^3.0.1",
"array-move": "^1.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"babel-preset-stage-2": "^6.24.1",
"bootstrap": "^4.1.3",
"bootstrap-v4-rtl": "^4.1.1-0",
"can-use-dom": "^0.1.0",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"connected-react-router": "^6.2.1",
"cross-env": "^5.2.0",
"downshift": "^3.1.5",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"email-regex": "^3.0.0",
"express": "^4.17.1",
"history": "^4.7.2",
"install": "^0.10.1",
"isomorphic-fetch": "^2.2.1",
"jss-rtl": "^0.2.3",
"jwt-decode": "^2.2.0",
"luhn": "^2.3.0",
"material-ui-pickers": "^2.0.1",
"moment": "^2.22.2",
"node-sass": "^4.10.0",
"node_env": "^0.0.3",
"nprogress": "^0.2.0",
"package.json": "^2.0.1",
"path": "^0.12.7",
"prop-types": "^15.6.2",
"query-string": "^6.4.0",
"react": "^16.6.3",
"react-autosuggest": "^9.4.2",
"react-big-calendar": "^0.20.2",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-ckeditor-component": "^1.1.0",
"react-color": "^2.17.0",
"react-custom-scrollbars": "^4.2.1",
"react-d3-speedometer": "^0.4.2",
"react-device-detect": "^1.6.1",
"react-dnd": "^6.0.0",
"react-dnd-html5-backend": "^6.0.0",
"react-dom": "^16.6.3",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^4.2.9",
"react-google-maps": "^9.4.5",
"react-hot-loader": "^4.3.12",
"react-icons": "^3.2.2",
"react-intl": "^2.7.2",
"react-joyride": "^1.11.4",
"react-jss": "^8.6.1",
"react-jvectormap": "^0.0.4",
"react-loadable": "^5.5.0",
"react-notifications": "^1.4.3",
"react-number-format": "^4.0.4",
"react-paypal-express-checkout": "^1.0.5",
"react-placeholder": "^3.0.1",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-select": "^2.1.1",
"react-simple-maps": "^0.12.1",
"react-slick": "^0.23.1",
"react-sortable-hoc": "^0.8.3",
"react-star-rating-component": "^1.4.1",
"react-swipeable-views": "^0.13.0",
"react-text-mask": "^5.4.3",
"reactstrap": "^6.5.0",
"recharts": "^1.3.6",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.2",
"save": "^2.3.2",
"slick-carousel": "^1.8.1",
"typeface-roboto": "^0.0.54",
"underscore": "^1.9.1",
"url-search-params": "^1.1.0"
},
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"bootstrap": "^4.1.3",
"node-sass": "^4.9.3",
"prettier": "^1.14.2",
"react-scripts": "2.1.1"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">0.25%",
"not op_mini all",
"ie 11"
]
},
"engines": {
"node": ">=6.9.0",
"npm": ">= 3"
}
}

Answer 2

Heroku will run npm run build by default when deploying. In your case this is react-scripts build. This script will bundle your code into a build folder.
Express
This means that your Express middleware should serve static files from your build folder instead of your src folder.
app.use(express.static(path.join(__dirname, 'src')));
should be:
app.use(express.static(path.join(__dirname, 'build')));
(Note: I suggest using an environment variable for this process.env.STATIC_DIR or something similar. This way you can easily switch between src for local development and build for production code and deployment.)
Procfile
Your procfile states which command Heroku should run after deploying your code. Knowing that Heroku runs npm run build you should serve your bundle instead of your source code.
You can do this by changing your procfile like this:
web:npm start
Should be:
web:node server.js
This will run your server.js file which serves your static content from the build folder.
(Note: npm run start is just for local development. When deploying your web app you should only deploy production code.)
(Note: You can test your production build locally by running npm run build to bundle your code and node server.js to serve it.)

Answer 3

Yeah, create-react-app doesn't play nicely with Node.
This is what I did to fix my deployment.
tl;dr :
Since you created the react app with create-react-app you need to use a different buildpack such as: github.com/mars/create-react-app-buildpack.git
An example workflow taken from Heroku's docs:
# You probably did this already
# Create the App
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
# Then you worked on your app
# Now, create the app in heroku with this buildpack...
heroku create -b https://github.com/mars/create-react-app-buildpack.git
# ...or add the buildpack in Heroku's dashboard
# Add the files the buildpack bundled for you and deploy
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
# To see your app
heroku open
The Procfile (in the root directory) should contain the following:
web: bin/boot
Once that's in heroku's repo, you can use the CLI to start the web dyno
heroku ps:scale web=1:free
You can delete your server.js file at this point:
More info here: https://github.com/mars/create-react-app-buildpack#usage
Hope this helps. Cheers!