How to Deploy React Express, Node App to Heroku - 2020

UPDATE:

*************************** WATCH SIMPLER VERSION FIRST ***************************
https://youtu.be/xwovj4-eM3Y
***************************************************************************************

*************************** USE FETCH NOT AXIOS ***************************
Also, very important. Make sure you are making your backend calls using fetch not axios.
I found a good answer as to why here:
https://github.com/axios/axios/issues/1358#issuecomment-364789526
***************************************************************************************

If the above two did not resolve the issue go ahead with this video even though this is not my best work :)

ORIGINAL:

Struggling to deploy your react express app to heroku? Trust me, you are not alone. It is a pain to do so and that is why I created this video.

# Repo of the code used in this example
https://github.com/mujibsardar/react_express_heroku_example

# Make sure heroku CLI is installed
https://devcenter.heroku.com/articles/heroku-cli

# Run npm build in your CLIENT/React folder
cd client && npm build

# Add heroku post build script
# Add the following line to package.json on the server/node side:
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build

# Serve client react instead of backend
# Add the follwing code to your server file on the backend
const path = require('path');
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use(express.static(path.join(__dirname, 'client/build')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}

# Do the same for the following code. Your main server file that is.
// ** MIDDLEWARE ** //
const whitelist = ['http://localhost:3000', 'http://localhost:8080', 'https://shrouded-journey-38552.herokuapp.com']
const corsOptions = {
origin: function (origin, callback) {
console.log("** Origin of request " + origin)
if (whitelist.indexOf(origin) !== -1 || !origin) {
console.log("Origin acceptable")
callback(null, true)
} else {
console.log("Origin rejected")
callback(new Error('Not allowed by CORS'))
}
}
}
app.use(cors(corsOptions))

# Set heroku nodejs buildpack
# Run the following command
heroku buildpacks:set heroku/nodejs

Please let me know what kind of problems you run into. I would love to help if I can.

Other Helpful Links:
Tutoring: https://avantutor.com
Coding Q&A: https://askavan.com
Coding Bootcamp: https://avansclass.com

Видео How to Deploy React Express, Node App to Heroku - 2020 канала Avan Tutor