Open In App
Related Articles

How to use Azure Static Web Apps to Deploy an Angular App ?

Like Article
Save Article
Report issue

In this article, we will learn how to deploy Angular applications using Azure Static Web Apps.

Microsoft Azure: Microsoft Azure is a public cloud computing platform. It provides a lot of cloud services to access, manage, and deploy applications.

Azure Static Web Apps: Azure Static Web App is one of the services of Microsoft Azure. It automatically builds and deploys full-stack web apps from the code repository to azure.

Deploy Angular app using Azure Static Web Apps:


  • GitHub Account
  • Microsoft Azure account
  • Node.js
  • Angular CLI

Step 1: Install Node.js

  • Node.js 
  • Download and install
  • Run the below command in your terminal or command prompt to check whether Node.js is installed or not.
node --version

node version

  • Skip this step, if already installed.

Step 2: Install Angular CLI

  • Run the following command in your terminal or command prompt to install Angular CLI globally on your PC.
npm install -g @angular/cli
  • Make sure you have installed Node.js on your PC before running this command.
  • For more information, refer to

Angular CLI install

  • Skip this step, if already installed.

Step 3: Create an Angular App

  • Open Terminal in the folder where you want to create an Angular app.
  • Run the following commands one by one to create an Angular app and open the angular app folder.
ng new angular-app
cd angular-app
ng serve
  • Here “angular-app” is the name of the application.

Create angular app

  • “cd angular-app” will navigate the terminal to the newly created “angular-app” folder.
  • The “ng serve” command will start the local server.

Testing on localhost

  • Now, the Angular app is running at http://localhost:4200/
  • Copy and paste the link in the browser to open the Angular app.

Running on localhost

  • Enter Ctrl+C in the terminal to quit the server.

Step 4: Create a GitHub repository to store the angular application

Create GitHub Repository

Step 5: Commit local files to the GitHub repository

  • Run the following commands to commit files to your GitHub repository.
  • Note: Replace <replace with repo> with your repository.
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin<replace with repo>.git
git push -u origin main

Upload to GitHub

Note: Make sure you have installed and authorized it on your PC.

Step 6: Open Microsoft Azure Static Web App

Microsoft Azure Home page

Search static web app

  • Select Static Web App and click create.

Create Static Web App

Step 7: Create a Static Web App

  • Project Details
  1.  Select subscription.
  2.  Create a new or select an existing resource group.
  3.  Enter the name of your application.
  4.  Select plan and region.

Project details

  • Deployment Details
  1.  Select the repository source. In this case, GitHub is a source.
  2.  Sign in with your GitHub account.
  3.  Select the Organization, Repository, and Branch of your Angular app.

Deployment details

  • Build details
  1. Select Angular for Build Presets.
  2. Enter the output location in the following format.

Build details

  • Click Review + create.
  • Verify the summary and click create.
  • Wait for the app to be deployed.


Step 8: Navigate to the GitHub repository

  • Click Actions.
  • Wait until the progress completion.

GitHub Actions

Step 9: Return back to azure

  • Come back to the Azure Static Web App Deployment page.
  • Click Go to resource on the deployment page.

Resource details

Step 10: Explore the URL (output)


Congratulations! we deployed the Angular app using Azure Static Web Apps.

Note: The page displayed in the demo URL is the default page of angular application. It can be replaced with an actual application.

Last Updated : 10 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads
Complete Tutorials