DEV Community

Cover image for How to create an Azure Static Web App
Rashidat Jimoh
Rashidat Jimoh

Posted on

How to create an Azure Static Web App

Azure static Web Apps is a service offered by Microsoft Azure that allows users build and deploy static websites quickly. With Azure Static Web Apps, you can build you web apps which just HTML, Css and JavaScript or use a front-end framework.
Moreover, Azure Static Web integrates with GitHub which allows you to build and deploy your app whenever you push changes to your repository. You can use Azure DevOps or other source control systems.

Step-by-step process to create an Azure Static Web App with Github

Step 1: Sign in to the Azure portal and search for Static Web Apps in the search bar.
1st step on Azure
Step 2: Select the Static Web Apps option and click on 'Create'
2nd step on Azure
Step 3: In the "Basics" tab, select subscription, resource group, then enter in the name of your Static Web App and select a hosting plan as well the region closest to you.
Step 3
Step 4: Under deployment details, select your source control system
6 step
Step 5: Select your preferred source. In this guide, GitHub is used, so you have to sign into GitHub account if not already connected.
5 step
Step 6: Once you connect to your Github, select the organisation name, the repository you want to deploy to the cloud as well as the branch of the repository.
Step 6
Step 7: In the 'Build Details' section, enter in the build presets, as well as the app location. You can also enter in an api location and output location in this section.
Step 7
Step 8: Fill in the tags in the 'Tags' tab.
Step 8
Step 9: Click on the Review and create tab and create if you are satisfied with all details entered.
step 9
Step 10: Wait a few seconds or minutes for your resource to be deployed and click on 'Go to resource' once deployment is complete.
step 10
Step 11: The app is now deployed and you can click on 'Browse' to see it.
step 11

How to delete Azure Static Web App

If the Static Web App is no longer needed it is best practice to always delete the resource.
To do this, go to your resources on the Azure portal and select that particular static web app, select 'Yes' to delete.

Top comments (0)