Therichpost

How to Deploy Angular App on Azure SWA?

·

,
therichpost Avatar
therichpost
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:

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.

  1. 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
  1. Install the Azure Static Web Apps CLI extension:
   az extension add --name staticwebapp
  1. 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
       }
     ]
   }
  1. 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

Other Posts