How to Deploy Angular App on Azure SWA?

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share How to Deploy Angular App on Azure SWA?

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:

Deploying an Angular app on Azure Static Web Apps (Azure SWA) is straightforward and involves the following steps:

1. Prepare Your Angular App

1. Build the Application:
   Run the following command in your Angular project directory to create a production build:

   ng build --prod

This will generate a dist/ folder containing the build files.

2. Ensure your angular.json file is properly configured:

• Verify the output directory is correct ("outputPath": "dist/<your-project-name>").
• Make sure the base href matches your deployment path (use / for root):
  bash ng build --prod --base-href /

2. Set Up Azure Static Web Apps

1. Create a New Azure Static Web App:

• Go to the Azure Portal.
• Search for “Static Web Apps” and click Create.
• Configure the following:
  • Subscription: Select your Azure subscription.
  • Resource Group: Create or select an existing resource group.
  • Name: Enter a unique name for your Static Web App.
  • Region: Choose a region closest to your users.
  • Deployment Source: Select your code source (e.g., GitHub, Azure DevOps, or local).
  • Build Details: Specify the build settings for your Angular app.

3. Deploy via GitHub (Recommended)

1. Connect to GitHub Repository:

• If using GitHub, authorize Azure to access your repositories.
• Select the repository containing your Angular app and the branch to deploy (e.g., main).

1. Set Build Configuration:

• In the Build Details section, provide:
  • App Location: / (root of your Angular project).
  • Output Location: dist/<your-project-name> (replace <your-project-name> with your actual Angular project’s name).

1. Complete the Setup:

• Click Review + Create, then Create.

4. Deploy via Azure CLI

If deploying manually, follow these steps:

1. Install the Azure CLI and log in:

   az login

2. Install the Azure Static Web Apps CLI extension:

   az extension add --name staticwebapp

3. Deploy your Angular build output:

   az staticwebapp create \
     --name <app-name> \
     --resource-group <resource-group-name> \
     --source dist/<your-project-name>

5. Configure Routes (if needed)

1. In the root of your project, create a staticwebapp.config.json file to define custom routes, fallback routing, and authentication.
   Example:

   {
     "routes": [
       {
         "route": "/*",
         "serve": "/index.html",
         "statusCode": 200
       }
     ]
   }

2. Place this file in the dist/<your-project-name> directory before deploying.

6. Access Your App

Once deployed, Azure will provide a URL for your app. Test it in your browser. If you need a custom domain, configure it in the Azure portal.

7. Optional: CI/CD for Continuous Deployment

If connected to a GitHub repository, every commit to the branch you selected will automatically trigger a new deployment. For custom pipelines, integrate Azure SWA into your CI/CD tools.

Let me know if you need more help! ???? or comment below.

Jassa

Thanks