How to create an Azure static web application
Tags: devops, azure, cloud
Published: 2023-04-14 00:06:50

**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](https://github.com/AyBims/Admin_dashboard)

![Github Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7g4wg0x92k9g2fo9wsq.png)

After setting up your Github repository, login to your Azure account and click on create a resource
![Azure Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wigglx6icvnz6gk7d9sg.png)

Search for static web app, this will direct you to the Azure marketplace and bring out the resource
![Azure marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0iu1vuzwxucdofydksu.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/577vo999ptc9m65hlb8q.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zid3ssayw8pc6wp2cpzy.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xat26xmpr8uggkzqffqn.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51lb6nzcmy9586egl7pl.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhlfmikm129ojpaoawzm.png)

**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.