CI/CD Pipeline Setup for Angular and .NET Using GitHub Actions

Modern development teams expect fast, reliable, and automated delivery of applications. Continuous Integration and Continuous Deployment (CI/CD) help achieve this by automating build, testing, and deployment processes. For full-stack applications built with Angular (frontend) and ASP.NET Core (backend), GitHub Actions provides an efficient and flexible platform to set up CI/CD pipelines without external servers or complex tooling.

This article explains how to design and implement a complete CI/CD pipeline for Angular and .NET applications using GitHub Actions.

Introduction to GitHub Actions

GitHub Actions is a cloud-based automation platform that allows you to:

Build and test code on every commit
Run automated workflows
Deploy applications to servers or cloud platforms
Integrate with Docker, Kubernetes, Azure, AWS, or on-premise infrastructure

Workflows are defined using simple YAML files stored inside the repository under .github/workflows/.

High-Level Architecture of the CI/CD Pipeline

A typical CI/CD flow for Angular + .NET involves:

Code is pushed to GitHub
GitHub Actions triggers the workflow
Angular and .NET build processes execute in parallel
Tests are run
Artifacts are generated
Backend is published
Frontend is compiled and optimised
Final build is deployed to the target environment (Azure, IIS, Docker, etc.)

Workflow Diagram: CI/CD Pipeline for Angular + .NET

                    +---------------------------+
                    |       Code Commit         |
                    +-------------+-------------+
                                  |
                                  v
                      +-----------+-----------+
                      | GitHub Actions Trigger |
                      +-----------+-----------+
                                  |
              +-------------------+-------------------+
              |                                       |
              v                                       v
+-------------+-------------+          +--------------+--------------+
| Build & Test Angular App |          | Build & Test ASP.NET Core API |
+-------------+-------------+          +--------------+--------------+
              |                                       |
              v                                       v
+-------------+-------------+          +--------------+--------------+
| Generate Angular Artifacts|          | Publish .NET Artifacts      |
+-------------+-------------+          +--------------+--------------+
              \                                       /
               \                                     /
                \                                   /
                 v                                 v
                 +-------------+------------------+
                 |     Deploy to Target Server    |
                 +-------------+------------------+
                                  |
                                  v
                    +-------------+-------------+
                    |       Deployment Done     |
                    +---------------------------+

Step-by-Step Setup for CI/CD Using GitHub Actions

Step 1: Create the Directory Structure

Inside your repository, create:

.github/
   workflows/
        cicd.yml

This file will contain your pipeline definition.

Step 2: Configure CI/CD Workflow in GitHub Actions

Below is a standard example workflow to build and deploy an Angular + ASP.NET Core application.

Complete YAML Example

name: CI-CD Pipeline for Angular + ASP.NET Core

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

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

    # Build Angular Application
    - name: Setup Node
      uses: actions/setup-node@v3
      with:
        node-version: "18"

    - name: Install Angular Dependencies
      working-directory: ClientApp
      run: npm install

    - name: Build Angular Application
      working-directory: ClientApp
      run: npm run build --prod

    # Build ASP.NET Core Backend
    - name: Setup .NET
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: "8.0.x"

    - name: Restore .NET Dependencies
      run: dotnet restore ./ServerApp/ServerApp.csproj

    - name: Build .NET Application
      run: dotnet build ./ServerApp/ServerApp.csproj --configuration Release

    - name: Publish .NET Application
      run: dotnet publish ./ServerApp/ServerApp.csproj -c Release -o published

    # Upload artifacts
    - name: Upload Published Files
      uses: actions/upload-artifact@v3
      with:
        name: publish_output
        path: published/

This workflow:

Builds Angular
Builds .NET
Publishes backend
Generates deployable artifacts

Step 3: Add Deployment Stage

Depending on your hosting environment, you can integrate deployment steps.

Option 1: Deploy to Azure App Service

    - name: Deploy to Azure
      uses: azure/webapps-deploy@v3
      with:
        app-name: "myapp-backend"
        publish-profile: ${{ secrets.AZURE_PUBLISH_PROFILE }}
        package: published/

Option 2: Deploy to IIS via FTP

    - name: FTP Deploy to IIS
      uses: SamKirkland/[email protected]
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: published/

Option 3: Deploy via Docker Container

    - name: Build Docker Image
      run: docker build -t myapp .

    - name: Push to Docker Hub
      run: docker push myapp

Option 4: Deploy to Kubernetes (AKS/EKS)

    - name: Apply Kubernetes Deployment
      run: kubectl apply -f k8s-deployment.yaml

Complete CI/CD Flowchart: End-to-End Pipeline

    +----------------------+
    | Developer Push Code  |
    +----------+-----------+
               |
               v
    +----------+-----------+
    | GitHub Actions Start |
    +----------+-----------+
               |
    +----------+----------+-----------+
    |                     |           |
    v                     v           v
Build Angular      Build .NET     Run Tests
    |                     |           |
    +----------+----------+-----------+
               |
               v
    +----------+-----------+
    |   Create Artifacts  |
    +----------+-----------+
               |
               v
    +----------+-----------+
    |  Deploy to Server   |
    +----------+-----------+
               |
               v
    +----------+-----------+
    |  Monitor + Rollback |
    +----------------------+

Best Practices for CI/CD with Angular + .NET

Use separate jobs for Angular and .NET to speed up builds
Cache node_modules and .nuget to reduce build time
Store secrets in GitHub Secrets
Use branching strategy (main, dev, release)
Run automated tests before deployment
Use environment-specific configuration
Implement rollback strategy for safer deployments

Conclusion

Setting up a CI/CD pipeline using GitHub Actions for Angular and .NET leads to fast, reliable, and automated delivery. It eliminates manual deployment errors, improves team productivity, and ensures consistent releases across environments. Whether you deploy to Azure, IIS, containers, or Kubernetes, GitHub Actions provides a flexible and scalable CI/CD platform suitable for modern full-stack applications.

When properly configured with build, test, artifact generation, and deployment stages, this workflow becomes a strong foundation for enterprise-level delivery pipelines.