Create a Heroku Pipeline and Run Review Apps
After completing this unit, you’ll be able to:
- Create a Heroku Pipeline and add your apps.
- Run review apps.
Now that you’re familiar with the features of Heroku Flow and the concepts behind them, let’s use that knowledge and create an instance of Heroku pipelines, run review apps, and check out how things actually work.
To create a Heroku pipeline, you need a Heroku account. Sign up for a free account if you don’t have one already at https://www.heroku.com/. You also need a GitHub account for this module. Create one for free at https://github.com/.
Now you're ready to create your first pipeline.
- Log in to your GitHub account and make your own copy of
this repository by clicking Fork in the top right corner.
- Go back to Heroku, and click Login. Once you’re logged in, click New, then Create new pipeline.
- Give your new pipeline a name (such as flow-demo-pipeline), leave your name under the Pipeline owner field, connect it to the repository you forked in step 1, and click Create Pipeline.
Now that you have a pipeline, let’s create apps so you can spin up a review app (Review apps work only when there is at least one app in the pipeline):
- To create a new app, under Staging click Add app… then Create new app. Give your app a name (such as flow-staging-demoapp) and select Create app.
- Next, create a production app following the same steps. Under Production, click Create new app and give it a name (such as flow-production-demoapp).
- Once you create a staging app, the Enable Review Apps option becomes available. In the Review Apps column, click Enable Review Apps, and select Create new review apps for new pull requests automatically. This creates a review app for each pull request you make in the connected GitHub repository. If you’re planning to use this pipeline for this module and testing purposes only, select Destroy state review apps automatically then click Enable.
- Click the small arrows next to your staging app and click Configure automatic deploys. Keep the branch on master and click Enable Automatic Deploys.
- Now we’re going to make some changes to your GitHub repository, and see how it’s reflected in your Heroku pipeline.
- In GitHub, go to the flow-demo repository you forked earlier. Click the Public folder to open it, then click the index.html file.
- Click the small pencil icon in the top-right corner to edit index.html.
- Now let’s make some small changes to the text and font color. We’ll keep it simple since you’re still learning about Heroku Flow: Change the h2 color from red to green and the p class text from Running with Heroku Flow to Built with Heroku.
- Scroll down now and enter a short commit title and description. Then select Create a new branch for this commit and start a pull request, leave the branch name as default, and click Propose file change.
- On the next page, you can review the changes you’ve made. Click Create Pull Request.
- Go back to your Heroku Dashboard, and notice a new review app in the review apps column. To see how the changes you made look in a browser window, click the small arrows next to the review app, then Open app in browser.
You can see that the review app reflects the changes you just made to the code in GitHub. Congratulations on making your first Heroku Pipeline and review app. We can now move forward with merging changes back to the master branch.
- Go to GitHub and select the Pull Requests tab. Your Update index.html pull request should show up as an open Pull Request.
- Click it to see the PR (pull request) details, select Merge pull request, then Confirm merge.
- Go back to your Heroku Dashboard and you notice that your app is being built under staging. This deployment happens automatically when merging changes back to master since you have previously enabled automatic deploys.
- If you select Open app in browser next to your flow-staging-demoapp, you see the color green and text changes to Built with Heroku showing up. Staging environments are clones of production environments to test all code changes before pushing them to production and making them as part of the final product. Since the staging app looks the same as the review app and there are no issues. We can push it to the final production phase.
- Select Promote to production to push code changes to production now. Double check the production app name and select Promote.
- Notice that the app starts deploying to production.
- Select Open app in browser next to your flow-production-demoapp, and you can see that changes you made to the code have made their way to your final app in production.