In the previous part of this tutorial, How to Build a Login/Register App with the MERN Stack (Part 5): Connecting Frontend to Backend, we used React’s Context API to connect our Frontend React app to our Backend Express app. In this part, we will finally deploy our app to Heroku.
Installing and Setting Up Heroku CLI
First of all, if you don’t have one yet, you need to create a Heroku account. Then, download and install the Heroku CLI. Now you have it there, go ahead and login by running heroku login. This will open up your browser so that you can login to your Heroku account. You can use the -i option to login from your terminal.
Creating Heroku App
We are not deploying yet. We first need to create a Heroku app, to get the production URL to configure our app to use it. So, if you haven’t already, you need to track your app with Git. Then, in your app’s root directory, run heroku create <APP_NAME>. This will create an empty Heroku app, and an empty Git repository for it on Heroku. To confirm it, if you run git remote -v you should see the heroku remote added to your git remotes. BTW, the production URL for the app you just created is by default http://<APP_NAME>.herokuapp.com.
Now, head over to Heroku and login to your account and click on the app you just created. Switch to the Settings tab and scroll to the config vars section. This is where we define environment variables our app will use. Click on Reveal Config Vars, and add your environment variables from the .env file as key value pairs.
Finishing Up the Code
Backend
Go to index.js that’s in your app’s root directory. Then, add a new regular expression to the array assigned to the origin option for cors to allow requests from your production URL. For example, this is my cors configuration now.
Now, we need to add some additional lines to our Express app to make it handle Frontend Routes as expected. Add these lines just before the app.listen() line.
On line 4, we tell Express to serve static files from client/build. This means if the server is asked for some file like a.js or static/b.css it will respond with a file with the same name and path from client/build. And the route handler on line 6 makes Express respond with client/build/index.html, which is the production version of our React app, to any route not defined above. So, for example, if we request /login, it will respond with our React app, which knows how to handle that /login route.
Frontend
In the Users context file, mine is at client/src/contexts/Users.js, change the PRODCUTION_URL placeholder we put when declaring API_URL to your real production url. For example, here is mine.
const API_URL =
process.env.NODE_ENV === 'production'
? 'http://login-register-demo.herokuapp.com'
: 'http://localhost:5000';
package.json
One last step before we deploy. We need to tell Heroku how to build our React app and start our Express app. Add these two lines to the scripts section in package.json that’s in your app’s root directory.
"start": "node index.js", "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
The start script tells Heroku how to start our app. Now, Heroku runs the heroku-postbuild script after installing dependencies. So we use it to tell Heroku to install the dependencies needed by our React app, and then build it. The NPM_CONFIG_PRODUCTION environment variable is set to false for heroku-postbuild script to make Heroku install both dependencies and devDependencies. Do not forget the --prefix flag, this is necessary to make the npm install command run inside the client directory. At the end, we build our React app. The && part is there so that we can run another command in the same script.
Deploying
Now we are ready to deploy. From your terminal, run git push heroku master to push your code to the heroku remote, and Heroku will take care of the rest. If you haven’t already, you may want to stage all your files and commit them before you push to Heroku. And….Voila! It is up and running.
Conclusion
First, we installed and set up the Heroku CLI. Then, we created a Heroku app. Afterwards, we modified our code to use the production URL. Finally, we pushed our app to Heroku.
NOTE: You can find all parts of this tutorial here and code here.
