DEV Community

Cover image for How to Build your first Static Web App on Azure
sipsdaoracle
sipsdaoracle

Posted on

How to Build your first Static Web App on Azure

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

Image description

Here is the repository...

Image description

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

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

Image description
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

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

Deploying...
Image description

Step 3: Visit the website

Once deployment is complete click on Go to Resource

Image description

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

Image description

Congratulations here is your first static web app!

Image description

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

Top comments (0)