Building a Static Web Application on Microsoft Azure

Introduction

My previous article, was focused on how to set up a virtual machine on AWS.
In this article, I will be focusing on building static web applications on cloud using Microsoft Azure. Just before we dive deep into the practical, let's understand what an Azure static web app is and why we do need it.
Azure static web app is a code-based service offered by Microsoft Azure that allows users to build and automatically load changes to a web application taking the code from the sources code or version control such as GitHub, BitBucket, GitLab or Azure DevOps thereby making your application globally available as opposed to the traditional method of building applications.
This gives you an amazing experience as a developer as changes to your source code are monitored and automatically updated.
Basically, what this means is that, once there is a change in your source code or any branch that Microsoft Azure static web is monitoring, it automatically updates the changes without you having to bother to update the changes manually.
Microsoft Azure static web app supports different frameworks such as Angular, Vue, React, and Blazor and you can also build web applications not using any of those frameworks.
For the purpose of this tutorial, I will not be using any framework.

Creating a Repository

I will be using GitHub to host my code.
You can sign up on GitHub here or sign in if you have an account.
Click on this link https://github.com/staticwebdev/vanilla-basic/generate provided by Microsoft which all the basic folders we will be needing for this tutorial and create your own repository by clicking on create repo from template

After creating the repo, clone it using either GitHub desktop or VS-code so you have it on your remote machine.

After cloning open it in VS-code

In the src folder, there is an index.html file where you add the code for your app and the CSS.style file where you give your web app the style you want.

Setting up on Azure

The next thing to build the web app on Azure.

Step One: Locating the Azure Static App

In the search bar of your Microsoft Azure, search web static app and select it which will open to another window. If you have an already existing app, you'd see it here.
Click on create static web app to create a new web app

Step 2: Configuring the Static Web App

• Select your resource group
• Name your static web app appropriately
• In the hosting plan, select free: for hobby or personal project
• Select your region
• In deployment details, select GitHub as the source and click on the sign in with GitHub dialogue box, which will open another window for you, go ahead and authorize Azure to connect to your GitHub account.
• Click on the drop down arrow in the organization section and select your GitHub account, the repo you will working on and the branch you want to make contributions to. In this case I will select the 'Main' since that's the branch will be making contributions to.Scroll down your page, you will see a Build Details section
• Click on the Build presets and select 'custom'.
• In the app location, add the folder where the app will be, in my case the src folder as seen in the image below.
• Click on Review and Create at the bottom left of the pageIf you followed all the steps above, your web should pass the validation review then click on create

Step 3: Creating the Static Web App

After creating and your static web app, click on go to resources when deployment is completed. Click on the dialogue box above the deployed resources where Azure prompts you to.

Clicking on that will lead you to your GitHub page where you will see your source. You make make changes to your code and also track the status which will show "success" once all changes are automatically updated to the cloud

Step 4: Tidying up

It is very important to tidy up all resources when not in use so as to avoid billing.
Go back to your Azure portal and select the static web app that we have built and select delete. It a good practice to always delete resources when they are not in use.

Thank you for reading to the end, stay glued to the blog as you bring more content your way....!