Azure Static Web Apps with Angular and Visual Studio Code
Tags: azure, angular, visualstudiocode, staticwebapps
Published: 2023-02-11 18:24:01

Hey everyone, in today's post we are going to talk about how to deploy an Angular app to Azure Static Web App using Visual Studio Code.

To better understand what is Azure Static Web App, visit [Azure Static Web Apps - The Big Picture](https://dev.to/reniciuspagotto/azure-static-web-apps-the-big-picture-1e16?wt.mc_id=studentamb_72239)

## Prerequisites
- [NPM](https://nodejs.org/en/download)
- [Angular CLI](https://angular.io/cli)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Azure Static Web App extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) for Visual Studio Code
- [Git](https://git-scm.com)

Once you have all prerequisites installed, let's create an Angular project and for that, create a new folder in any directory you want on your machine. You can create it using the operating system's interface, or if you prefer, run the command below in your command line tool to create a new folder.

`mkdir <folder-name>`

Now, using the command line, go to the folder you just created and run the command below to create an Angular project.

`ng new <angular-project-name>`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhb5c16eq8g7n3c3jcco.png)

After creating the project, let's open it in Visual Studio Code. You can open the project using the interface or by typing the command below in your command line tool.

`code .`

**Important:** Always access the project root before opening in Visual Studio Code or you can open VS Code first and then open the project root. Always avoid opening the folder of the project you created in the previous folder, as this can lead to errors in the build and consequently in the pipeline

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1amafv9a7n9raw56ivwe.png)

The next step is the deployment, so Press F1 and search for Azure Static Web App: Create Static Web Apps and select.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibhvru7igjpqvmv4kexi.png)

In the next step, we need to select the Azure Subscription, but if you are not logged into your Azure account with Visual Studio Code, an option to make the connection will be displayed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssjqn0s4t4ebexvhldj7.png)

In the next option, we need to define the name to be given to the service in Azure.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i1lr163xttl06v7dz2v.png)

In the next step, it is time to define a name for the GitHub repository

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7bg24x46gpmia8zpo7r.png)

The next step is to define the region where the resource will be created.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqocd8ep1j0e18jlvoyf.png)

Now it's time to define the project type. Note that Azure Static Web Apps supports multiple frameworks and since our project is a Angular project, we should select the Angular option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbou7s9n8os7kxhspys2.png)

Here we need to set the path to the root of the Angular project which is /. By doing so, the runner responsible for processing the code deployment pipeline will be able to run the _ng build_ command to generate the outputs in the _dist_ directory.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbjwe9v0qmsmkwhrpdbg.png)

In the last step, we need to define the application build output path and for Angular projects we need to inform the dist folder and the project name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvncz41xel4zi8c7iy5k.png)

Finally, press enter to start creating the resource on Azure and creating the repository on GitHub.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmvk61y10gakq668bunv.png)

Once the run is complete, we have an instance of Azure Static Web Apps provisioned in Azure and ready to use, and the repository on GitHub with our code. At the end, the code deployment pipeline will be executed automatically by GitHub Actions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bgsk77l2wq1bvrbrunf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r815dyaiq2gfcq5en3pp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1udlax7j0y22lwjw0pk9.png)

If you are getting this type of error as shown below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ca4q63lmnnno2mv8w1yg.png)

Just remove the following line, in the _browserslistrc_ file in the root of the project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd6fl5g9o45mm9c7rpkj.png)

And try to deploy the app or run the app again.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzcqeusek0zf18lnivvj.png)

Now, let's open the Azure Portal to get the link of our the Web Site in Azure Static Web App resource.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cet06qcqambak3qoblqg.png)

With the link copied, paste it into your browser to see the result or you can simply click on the link to be redirected automatically.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8ayf67627ilg9t7wxb3.png)

## Conclusion
Azure Static Web Apps is a powerful feature that makes it easy and fast to build and deliver a modern front-end project.

Did you like this post? Want to talk a little more about it? Leave a comment with your questions and ideas or get in touch through [LinkedIn](https://www.linkedin.com/in/renicius-pagotto).