AzPark: SWA - How to deploy Angular SPA in Azure Static Web Apps
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.
Angular template : https://github.com/DashboardPack/architectui-angular-theme-free.git
Clone the above repository
- Run npm install on the root level of the cloned project
- 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