DEV Community

Lauren Omosa
Lauren Omosa

Posted on

Create a Static Web App on Microsoft Azure

Today, we will be learning how to create a static web app on Microsoft Azure. In this step by step procedure, you will realize that it easier than you actually thought.

1. Log in to your Azure portal and search for static web apps
After logging in to your account, input 'static web apps' on the search bar and enter. This will lead you to the static web app module and you can create a static web app from here.

create static webapp

2. Fill in the necessary static web app details
First, we have to fill out the subscription and choose a resource group. If you don't have an existing resource group, proceed to create one and make sure you give it a globally unique name.

resource group static
After that we fill in the static web app details by giving it a name.

static name
We also look at the different hosting plans with two different types which is the free plan for hobbies and personal projects and the standard plan for general production plan. Choose whichever you want.

plans
You can also look at the different plans available, compare them and choose what suits you most.

available plans
Next is choosing the region you want it to be hosted.

region
For the deployment details, you will have to choose between GitHub, Azure DevOps or another platform, but in this case we will go with GitHub. Sign in to access your GitHub account.

Deployment Details

Fill in the next steps with the repository, branch and build details of your repository that is to be deployed.

Git details

Preview your workflow file, then review and create.

review create

Details of your static web app will be shown and you can proceed with create.

create

After a few seconds, your deployment will be complete.

deployment complete

Head over to your resource and check the details of the static web app, you will see that a URL is provided for you if the deployment was successful.

static web app

Click on the URL and there you have it, your static web app has been created and deployed!

purple haze link

I hope you liked this tutorial. If you have any questions please feel free to ask :)

Top comments (0)