How to create a static web app in Azure
Tags: azure, cloud, staticwebapps
Published: 2023-04-15 15:07:47

**Azure Static Web Apps** is a service that automatically builds and deploys full stack web applications to Azure from a code repository (either Github or Azure Devops). 

## Prerequisites
- Have an Azure Account. If you do not have one, you can create an account [here](https://azure.microsoft.com/en-us/free/).
- A Github or Azure Devops Account to host your code. (This article would describe the Github workflow)

## Step 1: Create the code repository
To host the application code, you need to have a repository either on Github or Azure Devops. In this article, I used Github and created a repository using this [template](https://github.com/login?return_to=%2Fstaticwebdev%2Freact-basic%2Fgenerate). 

![Generating Code Repository From Template on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5wbsr7pl4lonc7jn1vy.png)
  
## Step 2: Create a static web app (Using Github)
1. From the azure [portal](https://portal.azure.com/#home), search for **Static Web Apps** and select the **Static Web Apps** service in the dropdown.
![Search for Static Web Apps in Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jja4mm9kjodtr7ugjzqi.png)
2. Select `Create` or `Create static web app` button has shown below.
![Create static web app in Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e62dblrd82bphweb2gz8.png)
3. On the basic tab, fill in the required fields

- **Subscription:** Select your Azure subscription
- **Resource Group:** Select a resource group if you have one created or use the `Create new` link, and enter a resource group name.
- **Name:** This is the name of the application. I used `moyin-static-web-app`. Enter your desired name in the textbox.
- **Plan type:** Select Free.
- **Azure Functions and staging details:** Select a region closest to you.I left it as default.
- **Source:** Select `GitHub` and authenticate by clicking `Sign in with Github` button.
![Creating static web app in Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwofycp5bvvo84fdlde0.png)
- Once authenticated, select the code `Organization`, `Repository` and `Branch` from the dropdowns. 
- **Build Presets:** Select the framework or language used to write the code. I used React.
- **App location:** Put the path of your application. Mine is the root folder so I left it as default('/).
- **Api location:** If you are working with an api, you can add the path here.
- **Output location:** Enter the path of your build.

Once done, `review and create` the application
![Code configurations for static web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e5y52ilg54b8ulf7vte.png)
![Create static web app in azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8n60tk5ixhxm4o3s22y.png)

When deployment is complete, select the `Go to resource` button
![Deployment complete in creating static web app in azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq5tjn2888ijbgz5k6ru.png)

## Step 3: Viewing the web application
The deployment build must be completed before the site can be viewed.You can select the banner with `Click here to check the status of your github action runs`.
![Deployment build of azure static web app in progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0q1cqwq7y71gt9vbyesd.png)

Once the build (Github Actions workflow) is completed, select the url and view the deployed web application as shown below.
![Select static web app url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djr03pd3tde4shbmphw6.png)
![Deployed Azure Static Web Apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zisx2x1mvzv5ytoi5axq.png)

## Step 4: Cleaning up resources
If you are not going to be using the application, then delete the `Azure Static Web Apps` instance to avoid incurring unnecessary costs.
![Deleting the azure static wep app instance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u20fb4u0nitt8haaz7qv.png)