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

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:

Requirements:

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

Step 1: Install Node.js

• Node.js 
• Download and install https://nodejs.org/en/download/.
• 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 https://angular.io/cli.

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 https://github.com/<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

• Visit https://portal.azure.com/.

Microsoft Azure Home page

• Sign in with your login credential.
• Click the following link to navigate the Azure Static Web App creation page. 
• Visit https://portal.azure.com/#create/Microsoft.StaticApp .
• Or search for ” static web app ” in the search bar of the 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.

dist/app-name

Build details

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

Deployment

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)

• Click on the URL and check the working condition.

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.