Open In App

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

Last Updated : 13 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

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.
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.



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads