Step-by-Step Tutorial: Setting Up an Angular CI/CD Pipeline with CircleCI

by

Implementing a continuous integration and continuous deployment (CI/CD) pipeline is essential for modern web development. This tutorial guides you through setting up an Angular CI/CD pipeline using CircleCI, enabling automated testing, building, and deployment of your Angular applications.

Prerequisites

  • An Angular project set up locally
  • A GitHub repository for your project
  • CircleCI account (free tier available)
  • Docker installed locally (optional for local testing)

Step 1: Push Your Angular Project to GitHub

Ensure your Angular project is initialized with Git and pushed to a GitHub repository. This repository will be connected to CircleCI for automated workflows.

Step 2: Connect Your GitHub Repository to CircleCI

Log in to CircleCI and authorize access to your GitHub account. Add your project repository to CircleCI by selecting it from the dashboard.

Step 3: Create a CircleCI Configuration File

In the root of your Angular project, create a directory named .circleci and inside it, a file called config.yml. This file defines your CI/CD pipeline.

Paste the following configuration into config.yml:

version: 2.1

jobs:
  build:
    docker:
      - image: circleci/node:14.17.0
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: npm install
      - run:
          name: Run tests
          command: npm test -- --watch=false --browsers=ChromeHeadless
      - run:
          name: Build Angular app
          command: npm run build -- --prod
      - persist_to_workspace:
          root: .
          paths:
            dist

  deploy:
    docker:
      - image: circleci/node:14.17.0
    steps:
      - attach_workspace:
          at: /workspace
      - run:
          name: Deploy to server
          command: |
            echo "Deploying application..."
            # Add your deployment commands here

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build

Step 4: Customize Your Build and Deployment

Modify the npm run build and deployment commands to fit your project’s needs. For example, integrate with cloud services like AWS, Azure, or Firebase for deployment.

Step 5: Push Changes and Trigger the Pipeline

Commit and push your .circleci/config.yml file to GitHub. CircleCI will automatically detect the changes and start building your project.

Step 6: Monitor Your Pipeline

Navigate to your CircleCI dashboard to monitor the progress of your builds. Check logs for errors and verify successful deployment.

Additional Tips

  • Use environment variables in CircleCI for secrets and API keys.
  • Configure branch filters to run pipelines only on specific branches.
  • Integrate notifications to Slack or email for build status updates.

Conclusion

Setting up a CI/CD pipeline with CircleCI streamlines your development workflow, ensuring rapid testing and deployment of your Angular applications. Customize the pipeline further to match your deployment environment and project requirements for optimal results.