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:
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.