Deploying a fullstack React app to Heroku

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 static buildfolder'

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