In this section, we will deploy our React frontend to Heroku. The easiest way to deploy the React app to Heroku is to use the Heroku Buildpack for create-react-app (https://github.com/mars/create-react-app-buildpack). For deployment, we have to install the Heroku CLI, which is the command-line tool for Heroku. You can download the installation package from https://devcenter.heroku.com/articles/heroku-cli. After the installation has finished, you can use the Heroku CLI from PowerShell or the Terminal you're using. The following steps describe the deployment process:
- Open your frontend project with VS Code and open the constant.js file in the editor. Change the SERVER_URL constant to match our backend's URL and save the changes:
export const SERVER_URL = 'https://carbackend.herokuapp.com/'
- Create a local Git repository to your project and commit the files, if you haven't done that, yet. Navigate to your project folder with the Git command-line tool and type the following commands:
git init
git add .
git commit -m "Heroku deployment"
- The following command creates a new Heroku app and asks for credentials to log in to Heroku. Replace [APPNAME] with your own app name. After the command has been executed, you should see the new app in your Heroku dashboard:
heroku create [APPNAME] --buildpack https://github.com/mars/create-react-app-buildpack.git
- Deploy your code to Heroku by typing the following command to PowerShell:
git push heroku master
After the deployment is ready, you should see the Verifying deploy... done message in PowerShell, as shown in the following screenshot:
Now, you can go to your Heroku dashboard and see the URL of your frontend; you can also open it from the Heroku CLI by typing the heroku open command. If you navigate to your frontend, you should see the login form:
