DEV Community

Cover image for How to create an Azure static web application
Ayomide
Ayomide

Posted on • Edited on

How to create an Azure static web application

Introduction
What is a static web app
Azure Static Web Apps is a cloud service owned by Azure that allows you to automatically build and deploy full stack web apps from a code repository to Azure

Advantages of using static web apps
We would be discussing some of the advantage of using static web apps to host our applications:

  1. SSL Certificates - Azure is responsible both for creating an SSL certificate for your website endpoint but also for maintaining and renewing the certificate.

  2. Highly Available - Azure takes charge of distributing your website content to your end-users. It also makes sure that your website is available 99.999% of the time

Prerequisites for the project
There are a few prerequisites needed before we can create a static web application in Azure

  • A Github account

  • An Azure account

Configuration
First we need to create a Github repository and upload the files for our website. You can also choose to fork my Github repository

Github Repository

After setting up your Github repository, login to your Azure account and click on create a resource
Azure Dashboard

Search for static web app, this will direct you to the Azure marketplace and bring out the resource
Azure marketplace

Select the resource and this will redirect you to a page where you would be creating your static web app
Azure static web app create page

Select Github as your deployment method and authorise Azure to have access to your Github account. Select the github repository you want to use for this project from the list of repositories in your account. Add the github branch where your project is located

This is especially useful when you are working on a repository that has several branches for different features but you want only updates that have been merged to specific branches to be deployed to the end-users

Azure static web app portal, Github connection

Deployment
Under build details, select custom and provide the path to where your index.html file is located as the app location. After completing all these steps, go ahead to create your static web app
Azure static web app, build details

There would be a notification on your screen informing you that content has not been received for your site yet. You can choose to click on that link and check on the status of your Github Actions runs or just wait a few minutes and check the url provided on that page
Azure static web app created page

If everything went according to plan, you should be able to see the contents of your website when you click on the url provided on the Azure portal

If your url is not showing your website data, you can retrace your steps in order to figure out what went wrong
Website up and running

Conclusion
Do not forget to delete the Azure static web app that you created after you are done with the implementation of the project so that you do not incur unplanned billing charges.

Top comments (0)