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:
SSL Certificates - Azure is responsible both for creating an SSL certificate for your website endpoint but also for maintaining and renewing the certificate.
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
After setting up your Github repository, login to your Azure account and click on create a resource
Search for static web app, this will direct you to the Azure marketplace and bring out the resource
Select the resource and this will redirect you to a page where you would be creating your static web app
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
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
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
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
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)