How to Build your first Static Web App on Azure
Tags: azure, github, cloudskills, tutorial
Published: 2023-04-30 19:03:52

Building a Static Web App might sound a bit intimidating especially if you're a beginner to using cloud platforms such as Azure. You might wonder why do you even need to build one? And with your busy schedule, you might ask how long will it take you to complete.

Well, here's a []minute read that takes you step by step, answering those questions, putting your doubts and worries to rest so you can get to building your very first Static Web App using Azure.

Alright now let's get started.



##  Prerequisite

1. Create an Azure subscription free trial account.
2. GitHub account


Firstly, you need to decide on which hosting platform you are going to use to host your static web app, you can choose between **Github** or **Azure DevOps** in this tutorial we are going to choose **Github** .


## Step 1: Create A Repository
- In this instance we are going to navigate to the following 
  location to **create a new repository**:
  https://github.com/staticwebdev/react-basic/generate

- Name your repository **my-first-static-web-app**
- **Select Create repository** from template.

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

Here is the repository...

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

## Step 2: Create a static web app

Now that we have created our repository we are going to have to create the static web app from [Azure Portal](https://portal.azure.com/) 

After logging in to the portal:
**1.Select Create a Resource.**
**2.Search for Static Web Apps.**
**3.Select Static Web Apps.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrkoq1ap1wg5e9t32psr.png)
**4.Select Create.**
Enter the static web app details as below, enter in the **name** , choose the **region** . Under the Deployment details **Sign in with Github** and then click on **Review and Create**

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

Choose the organization and repository and then choose **main ** for the branch.
Select **React** as your build preset, leave everything as default and  click on **Review + Create**

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

**Deploying...**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1ujmufr3s6ocv8icf1w.PNG)


## Step 3: Visit the website

Once deployment is complete click on **Go to Resource**


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

Under the **Overview** pane look for the **URL ** and click to open 


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

Congratulations here is your first static web app!

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

## Step 4: Clean up resources
Once you have completed creating and visiting the static web app, you clean up by deleting the static web app to avoid incurring costs.


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