Azure Static WebApps is a fairly new Azure service, currently in preview. Azure WebApps is a managed, serverless service that allows us to quickly deploy and publicly expose a static web application (from a global content delivery network) – such as single page applications as created using Angular, React, Vue and others with client side resources such as CSS, images, JavaScript and HTML and using backend APIs implemented using Azure Functions.
The code for web app lives in a GitHub repository. The repository is configured with a GitHub Actions workflow that builds the application and deploys it to the Azure service. Under the hood, a Docker container image is built and handed to the “serverless” framework. Before this can be done, a Static WebApp instance is created in Azure Portal and associated with the GitHub repository. At the time of association, Azure creates a Secret in the GitHub Repo that is used in the deployment workflow to perform the handshake from GitHub to Azure.
Upon deployment, a public URL is assigned to the web app. Through this URL, the application can be accessed from the public internet.
Authentication/authorization can be configured for the Static WebApp, using popular authentication providers (Azure Active Directory, Facebook, Google, GitHub, and Twitter). A maximum of 25 users can be defined that are allowed access to a Static WebApp – this is a limitation under the free plan in the current preview. Other limitations (under the current free preview, probably indicative of what will come after):
Static WebApps uses free SSL certificates, which are automatically renewed. When an API is used to back the static web app – Azure Functions – a seamless security model is used with a reverse-proxy which requires no CORS configuration.
When changes in the application’s source code are committed or merged to the main branch, the GitHub Action is triggered, the build & deploy workflow is executed and a new version of the application is published. At present (in the preview) deployment is to the single environment that is available; in the GA edition of Static WebApp, a pre-production or staging environment will be available into which this continuous delivery takes place.
Quick Demo Steps
Make sure you’re signed in to GitHub and navigate to the following location to create a new repository:
https://github.com/staticwebdev/react-basic/generate
This takes you to a page where you can create a fork of a Git repo that contains a template for a React based static web app. Similar pages are available for vanilla static webpage (no framework), Angular and Vue. Modifying the starter repo for your own selection of frameworks and libraries is straightforward.
Give an appropriate name to the generated repository, for example my-static-react-webapp.
Create the repository.
Once the repo is set up, you can inspect the code – a very basic React application – and the Actions. Under actions, you will find nothing yet.
You can clone the repo locally, change into the application directory, run npm install and run yarn start to run the static web application. Note: this requires npm and yarn to have been installed beforehand. Running the application locally is not required in order to turn it into a Static WebApp on Azure.
Now that the repository is created, you can create a static web app from the Azure portal.
Navigate to the Azure portal. Type Stat (ic Web Apps) in the search bar and press enter.
Click on the Add link
Set the Azure Resource Group and the Name of the Static WebApp. for example my-static-react-webapp.
Select the Azure Region.
Click on Sign In with GitHub
Sign In with your GitHub account:
Then authorize Azure Static Web Apps to interact with your repositories.
You return to Azure Portal. Select the right Repo and the branch from which the Static WebApp should be built and deployed.
With the GitHub details defined, provide details on the application itself. Select the type of application (React) and the essential elements in its directory structure. For now, there is no API yet – however we can already indicate that there may be an Azure Functions project located in the directory /api.
Press Review + Create. Review the details:
and press Create.
You are notified about the pending deployment:
and after a little while about the completed deployment:
Click on Go to resource.
You are taken to the Static WebApp resource. On this page, you will find the public URL that has been assigned to the application.
At this moment, the React application will not have been built and deployment. I got a little confused by this. After all, I was notified about the deployment. I am not sure how the two types of deployment should be interpreted. However, at this moment, the public URL will return this page:
After one or two additional minutes, the React application will manifest itself:
In the mean time, the GitHub Action was triggered and the build and deploy workflow executed.
This workflow was created when the Azure Static WebApp was associated with this GitHub Repo. It contains instructions for building the Docker container image from the source code of the application in the shape that is required by Azure Static WebApp. It also takes care of publishing that image to Azure Static WebApp.
In order to perform that last step, it has need of credentials that have been injected into the GitHub repo in the form of a Secret that was created again when the Static WebApp was associated with the GitHub Repo.
Here is the log of the Build & Deploy process from the recent run of the workflow:
and the final details on the Build and Deploy step:
Note: by inspecting the logs, you get full insight in what is done in order to prepare and push the container image.
Finally, let’s make a change to the application. Here is the current code for App.js:
And here is the changed code (changing it right in the GitHub browser editor).
Commit the change:
Which will trigger the GitHub Action and run the build and deploy workflow. After a few minutes, this workflow will be done and the new version of the Static WebApp will be published to the world.
Note: the 2nd, failed workflow run is the result of syntax errors in the App.js code.
This is what the application now looks like:
Resources
Quickstart: Building your first static web app in the Azure portal – https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react
Tutorial – deploy Blazor static web app – https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor
Tutorial – add an API to the static web app – implemented with Azure Function – https://docs.microsoft.com/en-us/azure/static-web-apps/add-api
