A few steps that may come in handy when deploying your fullstack React app.
Deployment Steps
1. Update Server.js
Server.js We will create a static build folder for the front end. This will be your React app. We need to tell the server where this will be so in your server.js file, add this:
//server.js
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
}
2. Build
Run the yarn command from your root folder:
yarn run build
3. Add build folder to git
Now we have to add that build folder to your git so Heroku has access to it.
git add client/build
git commit -m 'Adding staticbuildfolder'
4. Heroku
Create your Heroku app. Note, you need to install the Heroku toolbelt (https://blog.heroku.com/the_heroku_toolbelt)
heroku apps:create NAME_OF_APP
Now you need to push your app to Heroku.
git push heroku master
5. Connecting your database
To connect to your database, you will have to provision Heroku with that database.
For Mongo, I tend to use MongoLab: https://devcenter.heroku.com/articles/mongolab
For SQL, you can use ClearDb. https://devcenter.heroku.com/articles/cleardb
You will have to update your connection string in your server to make this wok.
Troubleshooting
To view the Heroku logs use
heroku logs --tail
Other common issues you may run into:
- .lock files You have two .lock files (packagejson.lock and yarn.lock). Heroku only allows for one so you can simply delete one.
- dependencies You are missing dependencies. Heroku will let you know if you look at the logs.
- .gitignore Make sure your client/build folder is not in your .gitignore file.
- A great reference: https://github.com/fullstackreact/food-lookup-demo
I hope you enjoyed this installment of Zack knows some stuff. I'm a developer, founder, lecturer
https://facebook.com/ransomly
https://instagram.com/positivelyZack
https://instagram.com/ransomly_inc