In the previous post, I covered steps you need to set in your React application to deploy it on Heroku. What I didn’t cover are the steps that you need to do in Heroku for automatic deployment. That is the focus of this post. I do assume that you already allowed your Heroku account access to your GitHub repository. Also, you can do all these things via Heroku CLI. Still, many beginners feel more comfortable with UI, so I am only focusing on that.
Step 1
When you log into your Heroku account, click on the button with the label “Personal” or open https://dashboard.heroku.com/apps. This screen is also a place where you can see a list of all existing apps. If you are using a free Heroku account, be aware you are only allowed five applications.
Step 2
Click the button with the label “New” (top right button) and select “Create new app” from the dropdown
Step 3
Give it a meaningful name. I usually prepend with my GitHub username as it is not for production. It affects the generated URL for your application. A region can be anything. I am in Europe, so I use Europe. But it doesn’t make much difference.
Step 4
Once you create it, it redirects you to the Application page—usually, the Deploy tab. If not already selected, select it.
Step 5
In the deployment method section, select Github. This action shows extra options for selecting the GitHub repository.
Step 6
In the connect to the GitHub section, enter the name of your repository. You don’t need to enter the full name, but you need to click the search button. Once you do this, your repository should show below and the connect button next to it. Click that button.
Step 7
When you connect the repository, a new section is visible called Automatic deploys. In it, you need to select which branch you want to deploy. The main branch is the default option. If you click the button with the label “Enable Automatic Deploys”, each time you push deploy is triggered. You can also start the process manually using the “Manual deploy” section below.
At this moment, you are all ready, and you can start deploying. You might also want to start the first build manually. In the activity tab, you should see the history of all builds, and if you open logs, once it is all done, you should see a link you can use to access your application. If you missed the required setup on the application level, you can go back to my previous post or check the example project for it.
For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.
Top comments (0)