Let's talk Azure
Posts Tags Categories Series Showcase
Let's talk Azure

AzPark: SWA - How to deploy Angular SPA in Azure Static Web Apps

Divakar Kumar  included in  category Azure
     340 words   2 minutes 
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg0nqwwf7ic0o9dlogtl.png

Hey folks!, In this blog let’s see how to deploy our Angular SPA application to Azure Static Web Apps from Scratch.

I have listed down some of the pre-requisites below

Once VSCode is installed , Please make sure you have below extensions that will be used in our Static Web App series

Follow this link Azure Function Core tools to install based on your operating system

Follow this link Static Web Apps CLI to install the cli.

Please install Nodejs as it is required for your Azure static web apps CLI to

Next thing to start with is to find a best angular starter template.

There are many free templates available online , choose what suits you the most. I will be using the below template , which is used in my https://azpark.iamdivakarkumar.com as well.

1

git clone https://github.com/DashboardPack/architectui-angular-theme-free.git
  • Run npm install on the root level of the cloned project
1

npm install
  • In your VSCode click on the Azure icon in the left pane and select add icon in Static Web apps section

  • Provide a name to your azure static web app

  • Choose angular as your build preset based on which the folder structure will be configured

  • Enter the appropriate location of your application code

  • Enter the location of your build output relative to your app’s location

  • Now you can view your github repo , where you can find github actions is been triggered by microsoft

  • Once it is build and deployed browse the site to see your application hosted in Azure static web app

Please go ahead and join our discord channel (https://discord.gg/8Cs82yNS) to give some valuable feedbacks

Updated on 2021-08-25
Read markdown
 .net core, asp.net, csharp, azure, azure static web apps
Back | Home