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


## About this blog

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

-------------------
## Pre-requisites

I have listed down some of the pre-requisites below 

- ### Azure subscription
- ### GitHub account
- ### VSCode 
  
  #### VSCode Extensions

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

##### Install Azure Static Web Apps extensions

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/077un12frvsvm983lntb.png"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/077un12frvsvm983lntb.png" width="4096" /></a>

##### Install Azure Function extensions

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o01qklkqpkyr62mvkif9.png"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o01qklkqpkyr62mvkif9.png" width="4096"/></a>


- ### CLI tools

#### Azure Function Core tools

Follow this link [Azure Function Core tools](https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=windows%2Ccsharp%2Cportal%2Cbash%2Ckeda) to install based on your operating system 

#### Static Web Apps CLI

Follow this link [Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli) to install the cli. 

#### Nodejs

Please install [Nodejs](https://nodejs.org/en/download/) as it is required for your Azure static web apps CLI to


## Starter Angular Templates

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
```bash
git clone https://github.com/DashboardPack/architectui-angular-theme-free.git
```

- Run npm install on the root level of the cloned project

```bash
npm install
```

-------------------
## Deploy to Azure Static Web App

### Add Static web app 

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

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd80dsz6twbranvarym3.png"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd80dsz6twbranvarym3.png" width="4096"/></a>


### Provide name for your application

- Provide a name to your azure static web app

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avkuuez4smdibou1tuk1.png"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avkuuez4smdibou1tuk1.png" width="4096"/></a>


### Choose type of your application 

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

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqh26wd4fmr2v6n0nswy.png"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqh26wd4fmr2v6n0nswy.png" width="4096"/></a>

### Provide location of your application

- Enter the appropriate location of your application code 

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk2pbr3nysy6fuo2sr68.png
"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk2pbr3nysy6fuo2sr68.png
" width="4096"/></a>

### Choose output folder

- Enter the location of your build output relative to your app's location 

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orqeyc893wflctqeowmb.png
"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orqeyc893wflctqeowmb.png
" width="4096"/></a>

### App is deployed

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

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5j7ty77j3auvzpd612c.png
"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5j7ty77j3auvzpd612c.png
" width="4096"/></a>

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

<a href="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvxxh0sb9m0vpqcfzana.png
"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvxxh0sb9m0vpqcfzana.png
" width="4096"/></a>


-------------------
## Join us

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


<a href="https://i.giphy.com/media/3o7aTqp7rSDB6uoTgA/giphy.webp
"><img src="https://i.giphy.com/media/3o7aTqp7rSDB6uoTgA/giphy.webp
" width="4096"/></a>

## Sponsor