13 min read

How to Set Up a CI/CD Pipeline for Angular on GitHub: A Step-by-Step Guide

How to Set Up a CI/CD Pipeline for Angular on GitHub: A Step-by-Step Guide
Photo by fabio / Unsplash

In the fast-paced world of software development, the ability to build, test, and deploy your applications swiftly and reliably is paramount. This is where Continuous Integration and Continuous Deployment (CI/CD) pipelines come into play. CI/CD pipelines automate the processes of testing and deploying code changes, enabling developers to focus on writing quality code while reducing the risk of errors in production.

For Angular developers seeking an efficient way to implement CI/CD, GitHub Actions has emerged as a powerful and flexible solution. GitHub Actions seamlessly integrates with your GitHub repositories, providing a platform to automate your CI/CD workflows. Whether you're a seasoned developer or just starting your journey with Angular and CI/CD, this step-by-step guide will walk you through the process of setting up a CI/CD pipeline for your Angular project on GitHub.

In this comprehensive tutorial, we will cover everything you need to know, from the initial repository setup to the creation of CI and CD workflows using GitHub Actions. By the end of this guide, you will have a fully functional CI/CD pipeline that automatically builds, tests, and deploys your Angular application whenever changes are pushed to your GitHub repository.

So, let's dive in and unlock the potential of CI/CD with GitHub Actions to supercharge your Angular development workflow. Whether you're a solo developer or part of a larger team, this guide will empower you to streamline your development process and deliver high-quality Angular applications with confidence.

Prerequisites

Before we jump into setting up your CI/CD pipeline for Angular using GitHub Actions, there are a few prerequisites you'll need to ensure a smooth experience. Here's a checklist of what you should have in place:

1. Basic Knowledge of Angular Development

To follow along with this guide, it's essential to have a foundational understanding of Angular development. If you're new to Angular, consider going through the official Angular documentation or completing an introductory course to grasp the basics.

2. A GitHub Account and a Repository with an Angular Project

You'll need an active GitHub account to access GitHub Actions and create repositories. If you don't have one already, you can sign up for free at GitHub. Additionally, you should have an existing GitHub repository where your Angular project resides. If you haven't created one yet, GitHub provides an easy-to-follow guide on creating a new repository.

3. Familiarity with YML Configuration

GitHub Actions uses YAML (YAML Ain't Markup Language) for defining workflows. You don't need to be a YAML expert, but a basic understanding of how to structure YAML files will be beneficial. If you're new to YAML, you can familiarize yourself with its syntax through resources like YAML Basics.

Having these prerequisites in place will ensure that you're ready to dive into the world of CI/CD with GitHub Actions for your Angular projects. If you're all set, let's proceed with setting up your CI workflow!

Setting up a GitHub Repository

Before we dive into the world of CI/CD pipelines, it's essential to have your Angular project hosted on GitHub. If you've already got a repository set up, you can skip ahead to the next section. If not, don't worry; we'll guide you through the process.

A. Creating a new GitHub repository for your Angular project (if not already done).

  1. Log in to GitHub: Start by logging in to your GitHub account. If you don't have an account, you can create one here.
  2. Navigate to Your Dashboard: Once logged in, you'll land on your GitHub dashboard. Click on the '+' icon in the upper right corner and select "New repository" from the dropdown menu.

Repository Settings:

  • Repository Name: Choose a name for your repository. It's a good practice to use a descriptive name related to your Angular project.
  • Description: Optionally, provide a brief description of your project.
  • Visibility: Choose whether your repository should be public (visible to everyone) or private (accessible only to collaborators).
  • Initialize this repository with: You can choose to initialize your repository with a README file, a .gitignore file, or a license. For an Angular project, initializing with a README is a good idea to provide initial documentation.
  1. Create Repository: Once you've filled in the necessary information, click the "Create repository" button.

Congratulations! You've now created a GitHub repository for your Angular project. You'll be redirected to the repository's main page, where you can find the repository URL, clone it to your local machine, and start working on your Angular code.

B. Cloning the repository to your local development environment.

Now that your repository is set up on GitHub, you'll want to clone it to your local development environment. Cloning allows you to work on your project locally and sync changes with the remote repository on GitHub.

  1. Copy the Repository URL: On the GitHub repository's main page, you'll find a green "Code" button. Click on it and copy the repository URL, which starts with 
https://github.com/your-username/your-repo-name.git.
  1. Open Your Terminal/Command Prompt: Navigate to the directory where you want to store your local copy of the repository using your terminal or command prompt.

Clone the Repository: Use the git clone command followed by the repository URL you copied in

For example:

git clone https://github.com/your-username/your-repo-name.git

Change Directory: Navigate into your newly cloned repository by using the cd command: 

cd your-repo-name

You now have a local copy of your GitHub repository on your machine, ready for development. You can make changes to your Angular project locally and then push those changes back to your GitHub repository.

C. Briefly explain the Git version control process.

Git is a distributed version control system that allows you to track changes to your code over time. It plays a crucial role in collaboration and code management when working on software projects.

Here's a quick overview of the essential Git commands:

  • git status: Shows the current status of your local repository, including untracked files and changes to be committed.
  • git add <file>: Stages changes to be committed. You can use git add . to stage all changes.
  • git commit -m "Your commit message": Commits staged changes with a descriptive message.
  • git push: Pushes committed changes to the remote repository on GitHub.
  • git pull: Pulls changes from the remote repository to your local repository.
  • git branch: Lists available branches in your repository.
  • git checkout <branch-name>: Switches to a different branch.
  • git merge <branch-name>: Merges changes from one branch into the current branch.

Now that your GitHub repository is set up and you have a basic understanding of Git, we're ready to move on to configuring CI/CD pipelines using GitHub Actions.

Introduction to GitHub Actions

GitHub Actions is a robust automation and workflow orchestration tool offered by GitHub itself. It's designed to simplify and streamline various aspects of your software development process. When it comes to Continuous Integration and Continuous Deployment (CI/CD), GitHub Actions plays a pivotal role.

  1. What are GitHub Actions and why are they beneficial for CI/CD?

    GitHub Actions are a set of workflows and custom scripts that can be triggered by events in your GitHub repository. These events can include pushes to the repository, pull requests, issues, and more. The key benefit of GitHub Actions for CI/CD is automation. By defining workflows in YAML files, you can automate tasks such as building, testing, and deploying your Angular application.
  2. GitHub Actions is beneficial for CI/CD because it allows you to:

    Automate repetitive tasks: Save time and reduce manual errors by automating tasks like running tests and deploying code.

    Ensure code quality: Automatically run tests and checks on every code change, ensuring that only reliable code reaches production.

    Enable collaboration: With CI/CD pipelines in place, teams can collaborate more effectively, knowing that changes are thoroughly tested and deployed consistently.

    Deploy with confidence: CI/CD pipelines provide a reliable and repeatable process for deploying updates to your Angular application.
  3. Accessing GitHub Actions in your repository

    Accessing GitHub Actions is easy. Simply navigate to your GitHub repository, and you'll find the "Actions" tab at the top. Clicking on it will take you to the GitHub Actions dashboard. From here, you can create and manage your CI/CD workflows.

Creating a CI Workflow

Now that you understand the benefits of GitHub Actions, it's time to create your CI (Continuous Integration) workflow.

Defining a YML configuration file for the CI workflow

The heart of your CI workflow is a YAML configuration file. This file defines the steps and actions to be taken when certain events occur in your repository. It's essentially a script that tells GitHub Actions what to do when, for example, a code push or pull request is made. In this configuration file, you'll specify the tasks necessary to build, test, and verify your Angular project.

To learn how to structure this YAML file, you can refer to the official GitHub Actions documentation on workflow syntax.

Create a .github/workflows directory:

In your repository's root directory, create a new directory named .github. Inside this .github directory, create another directory named workflows. This is where your CI workflow configuration file will reside.

/your-repo
├── .github
│   └── workflows

Create a YAML Configuration File:

Inside the workflows directory, create a new YAML file. You can name it something like ci.yml. This file will contain the configuration for your CI workflow.

/your-repo
├── .github
│   └── workflows
│       └── ci.yml

Define the Workflow:

Open ci.yml in your code editor and start defining your CI workflow. Here's an example structure for an Angular project:

name: CI Workflow

Setting up triggers for CI (e.g., push, pull request)

Triggers are events that initiate your CI workflow. Common triggers include code pushes to specific branches, pull requests, or even scheduled events. You can configure these triggers in your YAML file, ensuring that your CI workflow runs precisely when you want it to.

GitHub Actions provides flexibility in defining triggers. You can learn more about setting up triggers in the GitHub Actions documentation.

on:
  push:
    branches:
      - main  # You can specify the branch you want to trigger the workflow on

Configuring build and test steps for the Angular project

Within your CI workflow, you'll define the specific steps to build and test your Angular application. This can involve installing dependencies, compiling TypeScript code, running unit tests, and more.

You can use popular Angular CLI commands to execute these tasks within your CI workflow. Make sure to configure the necessary environment variables, dependencies, and scripts to ensure a successful build and test process.

on:
  push:
    branches:
      - main  # You can specify the branch you want to trigger the workflow on

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install dependencies
        run: npm install

      - name: Build Angular project
        run: ng build --prod

      - name: Run tests
        run: ng test

Committing and pushing the YAML configuration file

Once you've crafted your CI workflow in the YAML configuration file, commit it to your repository and push the changes. GitHub Actions will automatically detect the new workflow and start executing it based on the triggers you've defined.

Testing the CI Workflow

After setting up your CI workflow, it's essential to understand how it operates and address any potential issues that may arise.

Explaining the automatic execution of CI on GitHub

GitHub Actions will automatically execute your CI workflow when the defined triggers are activated. This means that whenever a push is made to the specified branch or a pull request is opened, your CI workflow will kick in, running the defined build and test steps.

Checking the CI workflow status and logs

Monitoring the status of your CI workflow is crucial for ensuring the health of your Angular project. GitHub provides a clear interface for tracking workflow execution. You can check the status, view logs, and see any errors or warnings that may have occurred during the workflow run.

Understanding how to navigate and interpret workflow logs is essential for diagnosing and addressing any issues that may arise during the CI process.

Handling common CI issues and troubleshooting tips

Despite careful configuration, CI workflows can encounter issues. This section will provide insights into common problems developers face during CI execution and offer tips and solutions for troubleshooting them. Topics may include dealing with dependency issues, test failures, and workflow errors.

By mastering the concepts outlined in this section, you'll be well on your way to setting up a robust CI workflow for your Angular project on GitHub Actions. Automation and efficient testing are key ingredients for delivering high-quality software with confidence.

name: CI

on:
  push:
    branches:
      - main  # Change this to your main branch name
  pull_request:
    branches:
      - main  # Change this to your main branch name

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 14  # Change this to your desired Node.js version

    - name: Install dependencies
      run: npm install

    - name: Build Angular app
      run: npm run build

    - name: Run tests
      run: npm test

    - name: Upload test results
      if: always()
      uses: actions/upload-artifact@v2
      with:
        name: test-results
        path: ./test-results

    - name: Deploy to production
      if: github.event_name == 'push' && github.ref == 'refs/heads/main'
      run: |
        # Add your deployment script here

This YAML configuration sets up a CI workflow for an Angular project on GitHub Actions. Here's a breakdown of what it does:

  1. It defines the name of the workflow as "CI" and specifies when it should be triggered using the on key. In this example, it triggers on pushes to the "main" branch and when pull requests are opened targeting the "main" branch. You can customize the branch names as needed.
  2. Inside the jobs section, there's a single job named "build" that runs on the latest version of Ubuntu.

The steps within the job include:

  • Checking out the code from the repository.
  • Setting up Node.js with a specified version (Node.js 14 in this case).
  • Installing project dependencies using npm install.
  • Building the Angular app using npm run build.
  • Running tests using npm test.
  • Uploading test results as artifacts for later inspection.
  • Optionally, deploying to production only when a push event occurs on the "main" branch.

You would place this YAML configuration file (typically named .github/workflows/main.yml) in the root of your GitHub repository. Make sure to adjust the Node.js version, branch names, and deployment script as per your project's requirements.

Creating a CD Workflow

Now that you've successfully set up your CI workflow in the previous steps, it's time to move on to creating your Continuous Deployment (CD) workflow. This step is essential for automatically deploying your Angular application whenever changes pass the CI tests. Here's what you need to do:

A. Defining a YAML Configuration File for the CD Workflow:

To create a CD workflow, you'll need another YAML configuration file similar to the one used for CI. In this file, you'll specify the deployment steps, such as where and how your Angular application should be hosted.

  • Create a new YAML file for CD, e.g., .github/workflows/cd.yml.
  • Define the workflow name, triggers, and jobs in the YAML file.
  • Configure the deployment steps, specifying the target environment (e.g., GitHub Pages, AWS, Azure, or a custom server).

For more details on creating this YAML file, refer to the GitHub Actions documentation.

B. Configuring CD Triggers (e.g., Successful CI Build):

Your CD workflow should trigger automatically after a successful CI build. This ensures that only code that has passed all tests and checks is deployed.

  • Configure the workflow to trigger on the completion of the CI workflow. This can be done by specifying the CI workflow's name or using workflow event triggers in the YAML file.

For specific examples and details on workflow triggers, see the GitHub Actions workflow syntax documentation.

C. Setting Up Deployment Steps (e.g., Hosting on GitHub Pages or a Cloud Platform):

Depending on your project's requirements, you can choose various deployment options. Popular choices include hosting your Angular application on GitHub Pages, AWS S3, Azure App Service, or a cloud server.

  • In your CD workflow YAML file, configure the deployment steps and settings according to your chosen hosting platform.
  • Ensure that any required authentication or access credentials are securely stored as secrets in your GitHub repository.

For detailed deployment instructions, refer to the documentation of your chosen hosting platform, and make sure to check for any GitHub Actions integration guides.

D. Committing and Pushing the CD YAML Configuration File:

After creating and configuring your CD workflow YAML file, commit it to your GitHub repository, just like you did with the CI workflow.

  • Use Git commands to add, commit, and push the new CD workflow YAML file to your GitHub repository.

With your CD workflow in place, your Angular application will be automatically deployed whenever changes are pushed to your repository and pass the CI tests.

Testing the CD Workflow

After setting up your CD workflow, it's crucial to understand how it works and ensure that deployments are successful. Here's what you need to do:

A. Explaining the Automatic Execution of CD after a Successful CI Build:

Your CD workflow should automatically kick off after a successful CI build. This seamless integration ensures that your code changes are deployed only when they meet your project's quality standards.

  • Explain how GitHub Actions handles the trigger and execution of your CD workflow.
  • Highlight the benefits of this automation, such as reducing manual deployment errors and saving time.

B. Verifying the Deployment of the Angular Application:

To confirm that your CD workflow is functioning as expected, you should verify the deployment of your Angular application.

  • Access the deployed application on the chosen hosting platform.
  • Check that the latest changes from your repository are reflected in the deployed application.
  • Provide tips on how to monitor and troubleshoot deployment issues.

C. Handling Common CD Issues and Troubleshooting Tips:

Despite the automation, occasional issues may arise during deployment. It's essential to be prepared to troubleshoot and resolve these issues efficiently.

  • Share common CD problems that developers might encounter.
  • Offer troubleshooting tips and resources to help readers address deployment issues effectively.

By understanding how your CD workflow operates and being ready to address any potential challenges, you can ensure that your Angular application continues to be deployed smoothly and reliably.

Advanced Configuration Options

While you've already set up a basic CI/CD pipeline, there are advanced configurations and customization options available to enhance your workflow. Here's what you can explore:

A. Discussing Advanced CI/CD Configurations and Customization Options:

Take your CI/CD pipeline to the next level by exploring advanced configuration options. These may include parallel testing, multi-environment deployments, and more.

  • Explain how to fine-tune your CI/CD workflow to suit your project's specific needs.
  • Provide examples of advanced configurations and their benefits.

B. Integrating with Third-Party Tools (e.g., Testing Frameworks, Linters):

Integrate third-party tools into your CI/CD pipeline to further improve code quality and reliability. Examples include test runners, code linters, and security scanners.

  • Walk readers through the process of integrating these tools into their workflows.
  • Emphasize the advantages of automated testing and code analysis.

C. Managing Secrets and Environment Variables Securely:

Security is paramount when dealing with CI/CD pipelines. Discuss best practices for managing secrets, API keys, and environment variables securely.

  • Explain how to store sensitive information as GitHub secrets.
  • Highlight the importance of not exposing confidential data in your repository.

By exploring these advanced options, you can tailor your CI/CD pipeline to meet the specific demands of your Angular project and ensure its long-term success.

Conclusion

As we reach the conclusion of this step-by-step guide on setting up a CI/CD pipeline for your Angular project on GitHub, let's recap the key takeaways:

A. Recap of the Key Steps in Setting up a CI/CD Pipeline for Angular on GitHub:

  • Summarize the fundamental steps covered in this guide, including CI setup, CD setup, testing, and advanced configurations.

B. Emphasizing the Benefits of Automation and Efficient Development:

  • Highlight the advantages of implementing CI/CD, such as faster development cycles, reduced errors, and improved collaboration among team members.

C. Encouraging Readers to Explore Further CI/CD Enhancements and Best Practices:

  • Encourage readers to continue their learning journey by exploring advanced CI/CD concepts, best practices, and the evolving landscape of development and deployment.

By following the steps outlined in this guide, you've equipped yourself with the knowledge and tools needed to streamline your Angular development process and achieve greater efficiency and reliability in your projects.

CI/CD with GitHub Actions is a powerful combination, and with practice, it will become an integral part of your development workflow.

Happy coding and deploying!