Mastering CI/CD with Heroku Flow: A Comprehensive Guide
Written on
Chapter 1: Introduction to CI/CD with Heroku
In the world of software development, Continuous Integration and Continuous Deployment (CI/CD) are critical for efficient workflows. Heroku has long championed these practices, providing seamless integration with various third-party tools, such as GitLab CI/CD and GitHub Actions. Previously, I explained how to connect your Heroku application with GitLab CI/CD for automatic deployments. In another article, I introduced a more intricate setup featuring both staging and production environments.
For those looking to leverage Heroku exclusively, the Heroku Flow suite offers a complete CI/CD experience without relying on external tools. This integrated approach encompasses Heroku Pipelines, Heroku CI, review apps, GitHub integration, and a structured release phase. In this guide, I’ll walk you through setting this up for your own projects.
Getting Started
Running Our Application Locally
To run the app locally, fork the GitHub repository, install the necessary dependencies, and execute the start command in your terminal. Follow these steps:
$ cd heroku-flow-demo
$ npm install
$ npm start
After launching the app, navigate to http://localhost:5001/ in your browser to see it in action.
Creating Our Heroku Pipeline
Now that our application is operational locally, it’s time to deploy it to Heroku for broader access. We’ll set up a Heroku pipeline that includes both a staging and a production app.
To begin, go to your Heroku dashboard, click the "New" button at the top-right, and select "Create new pipeline." In the dialog that appears, provide a name for your pipeline, choose yourself as the owner, and link your GitHub repository. If this is your first connection, you will need to authorize Heroku to access your GitHub account. Once connected, click "Create pipeline."
Configuring Your Pipeline
Congratulations on creating your Heroku pipeline!
Establishing Staging and Production Apps
Most development teams utilize at least two environments: a staging environment for acceptance testing and a production environment for end-users. To add both apps, click the "Add app" button in the "Staging" section. Select "Create new app" in the side panel, enter a name, choose yourself as the owner, and select a region (I opted for the United States). Confirm by clicking "Create app."
Now, repeat the process for your production app. Upon completion, your pipeline should display both apps.
Setting Up Automatic Deployments
To ensure our app gets deployed to the staging environment whenever we commit changes to the main branch, select "Configure automatic deploys" from the dropdown menu for the staging app. In the dialog, confirm that the main branch is selected and tick the box for "Wait for CI to pass before deploy."
Activating Heroku CI
Next, we need to set up CI. Navigate to the "Tests" tab and click the "Enable Heroku CI" button. Our demo app uses Node.js and runs unit tests with Jest through the npm test script. Heroku CI can automatically detect the command needed for testing, simplifying the setup.
Enabling Review Apps
The final step in our pipeline configuration is to enable review apps. These temporary applications are deployed for each pull request (PR) made in GitHub, allowing reviewers to examine changes easily without needing to run the code locally.
Click "Enable Review Apps" on the pipeline page and check all three boxes to allow automatic creation of review apps, ensure CI passes before creation, and set a time limit for stale review apps.
Now that we've configured everything, let's see it in action!
The first video titled "Everything you need to know to get started with CI/CD" provides a thorough overview of CI/CD practices and best practices.
Putting It All Together
Having set up our pipeline, staging app, production app, and automated deployments, it's time to test our configuration. Create a PR in GitHub with any change; I opted for a minor UI update, changing the heading from "Heroku Flow Demo" to "Heroku Flow Rules!"
Upon PR creation, a new check appears in GitHub for the Heroku CI pipeline. You can review test results in the Heroku "Tests" tab. Once the CI pipeline passes, a link to the review app will be added to your PR.
Upon receiving a successful code review, merge your PR. The staging app will automatically deploy since new code was committed to the main branch.
Assuming everything works as intended in the staging environment, you can promote your changes to production by clicking the "Promote to production" button on the staging app.
The second video, "MLOPS Github Action With CICD Pipeline One Shot Tutorial," demonstrates integrating CI/CD practices with MLOps and GitHub Actions.
After promoting the changes, your production app will be updated, making your new features available to users.
Conclusion
What an incredible journey! In a short time, we’ve configured a robust CI/CD solution tailored for enterprise needs. If you prefer using other CI/CD tools like GitLab CI/CD or GitHub Actions, Heroku accommodates those as well. However, if you wish to manage everything within Heroku, Heroku Flow is your go-to solution.