Continuous Integration and Deployment for Angular Projects

Continuous Integration (CI) and Continuous Deployment (CD) are crucial practices for ensuring code quality and accelerating the development lifecycle. This guide covers setting up CI/CD for Angular projects using GitHub Actions.

Setting Up GitHub Actions

Create a .github/workflows directory in your Angular project:

mkdir -p .github/workflows

Creating a CI/CD Workflow

Create a new workflow file in the .github/workflows directory:

// .github/workflows/ci-cd.yml
name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

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: Run lint
        run: npm run lint

      - name: Run tests
        run: npm run test -- --watch=false --code-coverage

      - name: Build Angular app
        run: npm run build -- --prod

      - name: Deploy to GitHub Pages
        if: github.ref == 'refs/heads/master'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/your-angular-app

Linting and Testing

The workflow runs linting and tests before building and deploying the application:

      - name: Run lint
        run: npm run lint

      - name: Run tests
        run: npm run test -- --watch=false --code-coverage

Building and Deploying

The workflow builds the Angular application and deploys it to GitHub Pages:

      - name: Build Angular app
        run: npm run build -- --prod

      - name: Deploy to GitHub Pages
        if: github.ref == 'refs/heads/master'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/your-angular-app

Setting Up GitHub Pages

Enable GitHub Pages for your repository:

Go to your repository on GitHub.
Navigate to Settings > Pages.
Under Source, select gh-pages branch.
Click Save.

Environment Variables and Secrets

Add environment variables and secrets to your GitHub repository for secure handling of sensitive data:

Go to your repository on GitHub.
Navigate to Settings > Secrets.
Click New repository secret.
Add the GITHUB_TOKEN secret.

Key Points

CI/CD practices ensure code quality and accelerate the development lifecycle.
Set up GitHub Actions by creating a .github/workflows directory in your Angular project.
Create a CI/CD workflow file to automate build, test, and deployment processes.
Run linting and tests before building and deploying the Angular application.
Build the Angular application and deploy it to GitHub Pages using GitHub Actions.
Enable GitHub Pages for your repository to host your Angular application.
Add environment variables and secrets to your GitHub repository for secure handling of sensitive data.

Conclusion

Setting up CI/CD for Angular projects ensures consistent code quality and streamlined deployment processes. By using GitHub Actions, you can automate the build, test, and deployment stages, allowing for rapid development and reliable delivery of your Angular applications. Happy coding!