Hosting a Static Web App on Azure
If you are familiar with Github and Visual Studio Code, publishing a static web app can be done in a reasonable convenient way if you use React, Angular, Svelte, Vue or other frameworks.
The framework you use has a fairly incidental impact on the specific way a project is built and hosted: the names of some of the project folders may vary, but they are largely equivalent from a hosting and integration perspective.
Lets detail the steps required to host an existing static React project from a Github repo. This project does not access any APIs – its essentially an elaborate Hello World.
The first step recommended by Microsoft is to install the Static Web Apps extension for VS Code. If you use frameworks other than the four listed, go to the Github repo for the extension to learn about it and access additional resources for five other frameworks.
If you don’t have an Azure subscription, the MS learning resource will build you a time limited “concierge” subscription that will allow you to complete the exercise commitment-free. If you do have a subscription, you can use the concierge subscription as well, but you will need to log out and back in to see the subscription in VSCode.
After installation, you will see an Azure logo in the Left vertical menu. When you click it, you should see an Azure explorer pane open. If you have an active Azure account, any resources you have created will display in the top panel. Since I already have a React project in Github, I have opened it in VSCode. I can click the “+” in the Azure Resources pane, and I can select Create Static Web App…
Once selected, you may be prompted to select a branch to build from- it expects main or master branch to be selected, but you can assign any branch you want.
The Azure extension facilitates adding the necessary Github actions to prompt any push or merge to the selected branch to prompt a build. The actions will appear in your branch as a new directory: .github/workflows and will be named starting “azure-static-web-apps-” and then a generated instance name and some alphanumeric value.
You can open and modify the .yml file just like any other Github action file. The settings for Repository/Build Configurations will most likely require specific path entries for your build.
For my React project I entered the following values. This is a standard Create-React-App template project:
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directoryI left the rest of the file as-is, but it is a very good starting-off-point for further automation steps such as automated tests, linting and so forth.
When done, you should see the following confirmation popup:
Check this page for the latest Microsoft directions for completing this workflow.