Section 1.1: Prerequisites

Before we begin, you'll need two essential accounts: one on Heroku and another on GitLab.

The demo application used in this tutorial is available in the GitLab repository.

Section 1.2: Running the Application Locally

To run the application on your local machine, clone the repository, install the necessary dependencies, and execute the start command. Open your terminal and execute the following commands:

$ cd heroku-gitlab-ci-cd-demo

$ npm install

$ npm start

Once the application is running, navigate to [http://localhost:5001/](http://localhost:5001/) in your browser to view your app locally.

Section 1.3: Deploying to Heroku

Now that the application is operational locally, it’s time to deploy it to Heroku, making it accessible from anywhere.

If you haven't already installed the Heroku CLI, do that first. After installation, run the following commands in your terminal to create a new Heroku app, deploy it, and open it in your browser:

$ heroku create

$ git push heroku main

$ heroku open

Congratulations! You've successfully deployed your Heroku app, and you can now view it via a Heroku URL.

Section 2.1: Making Changes to Your Application

With your Heroku app live, you might want to make updates. You can modify the source code, then add, commit, and push those changes to the main branch. To deploy these updates to your production Heroku app, simply run git push heroku main again. However, automating this process would be much more convenient. Here’s where GitLab CI/CD comes in.

Section 2.2: Understanding CI/CD

Continuous integration (CI) emphasizes frequent commits and maintaining a healthy build state. This is typically achieved through checks in a CI pipeline, which may include linters, unit tests, and end-to-end tests.

Continuous deployment (CD) focuses on frequent deployments. If the checks in the CI pipeline are successful, the build gets deployed; if they fail, it remains undeployed.

By utilizing GitLab CI/CD, we can set up our CI pipeline to execute tests and deploy our application to Heroku only if the tests pass.

Section 2.3: Configuring GitLab CI/CD

To create a CI pipeline in GitLab, we use a .gitlab-ci.yml file. Here’s a sample configuration:

image: node:20.10.0

cache:

paths:

• node_modules/

before_script:

• node -v
• npm install

stages:

• test
• deploy

unit-test-job:

stage: test

script:

• npm test

deploy-job:

stage: deploy

environment: production

script:

• apt-get update -yq
• apt-get install -y ruby-dev
• gem install dpl
• dpl - provider=heroku - app=$HEROKU_APP_NAME - api-key=$HEROKU_PRODUCTION_KEY

rules:

• if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

GitLab CI pipelines consist of stages and jobs. In our example, we have two stages: test and deploy. The unit tests are run in the test stage, while the deployment occurs in the deploy stage.

If any job in the previous stage fails, the deployment won't proceed, ensuring the app is not deployed in a faulty state.

To set this up, you'll need two CI/CD variables, $HEROKU_APP_NAME and $HEROKU_PRODUCTION_KEY. These should be configured within your GitLab project settings.

To retrieve your Heroku API key, navigate to your Heroku account settings, and locate the API key section. If you haven't generated one yet, you can do so now.

Next, in your GitLab project, go to Settings > CI/CD > Variables to create the following:

• Set $HEROKU_PRODUCTION_KEY to your Heroku API key.
• Set $HEROKU_APP_NAME to the name of your Heroku app (e.g., heroku-gitlab-ci-cd-demo).

With your GitLab CI pipeline configured, it's time to test it.

Section 2.4: Deploying Automatically

Let’s implement a change in the app's code. For instance, update the heading text from “Heroku and GitLab CI/CD Demo” to “Heroku and GitLab CI/CD Rules!” After making your modifications, add, commit, and push the changes to the main branch. This action will trigger the GitLab CI pipeline, allowing you to monitor its progress in real-time.

If all goes well, both the test and deploy stages should succeed. Now, visit your Heroku app to see your live changes!

From now on, any time you make changes to your app, just commit them, and GitLab CI/CD will handle the deployment process automatically.