How to deploy Angular with azure app service from GitHub?

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share How to deploy Angular with azure app service from GitHub?

Angular 19 came. If you are new then you must check below two links:

• Angular 19 Basic Tutorials
• Free Angular Admins

Now guys here is the complete code snippet and please follow carefully:

To deploy an Angular 17 application to Azure App Service from GitHub, follow these steps:

1️⃣ Prerequisites

• Azure Account (Sign up for free)
• GitHub Repository with your Angular 17 project
• Azure App Service (Node.js-based Web App)

2️⃣ Setup Azure App Service

1. Login to Azure Portal → portal.azure.com
2. Go to “App Services” → Click “Create”
3. Configure Web App

• Resource Group: Select/Create one
• Name: angular17-app
• Publish: Code
• Runtime Stack: Node.js 18+
• Region: Choose nearest
• Plan: Select Basic or Free

1. Click “Review + Create” → Click “Create”

3️⃣ Connect GitHub to Azure App Service

1. Go to your Azure Web App
2. Deployment Center → Select GitHub
3. Authorize GitHub → Choose your Repo & Branch
4. Click “Save” → Azure will auto-deploy on each push

4️⃣ Update Angular for Azure Deployment

Modify angular.json:

"outputPath": "dist/angular17-app",
"baseHref": "/"

5️⃣ Create Azure Build Script

1. Go to GitHub Actions
2. Create .github/workflows/deploy.yml

name: Deploy Angular 17 to Azure  
on: [push]  

jobs:  
  build:  
    runs-on: ubuntu-latest  
    steps:  
      - name: Checkout Repo  
        uses: actions/checkout@v3  

      - name: Setup Node.js  
        uses: actions/setup-node@v3  
        with:  
          node-version: 18  

      - name: Install Dependencies  
        run: npm install  

      - name: Build Angular App  
        run: npm run build -- --configuration production  

      - name: Deploy to Azure  
        uses: azure/webapps-deploy@v2  
        with:  
          app-name: "angular17-app"  
          slot-name: "production"  
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}  

6️⃣ Add Azure Credentials to GitHub

1. Azure Web App → Deployment Center
2. Get “Publish Profile”
3. GitHub → Repo → Settings → Secrets

• Add Secret: AZURE_WEBAPP_PUBLISH_PROFILE
• Paste the profile

7️⃣ Push Code & Deploy 🚀

1. Commit & Push to GitHub
2. Azure will auto-build & deploy

🎯 Your Angular 17 App is Live!

Access: https://angular17-app.azurewebsites.net

Let me know if you need help! 🚀

Ajay

Thanks