Getting Started with serverless Azure Static WebApps (React, Angular, Vue, .. + backend) image

Getting Started with serverless Azure Static WebApps (React, Angular, Vue, .. + backend)

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.

image

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):

image

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.

image

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.

image

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.

image

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.

imageClick on the Add link

image

Set the Azure Resource Group and the Name of the Static WebApp. for example my-static-react-webapp.

image

Select the Azure Region.

Click on Sign In with GitHub

Sign In with your GitHub account:

image

Then authorize Azure Static Web Apps to interact with your repositories.

image

You return to Azure Portal. Select the right Repo and the branch from which the Static WebApp should be built and deployed.

image

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.

SNAGHTML4bd98aa

Press Review + Create. Review the details:

image

and press Create.

You are notified about the pending deployment:

image

and after a little while about the completed deployment:

image

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.

image

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:

image

After one or two additional minutes, the React application will manifest itself:

image

In the mean time, the GitHub Action was triggered and the build and deploy workflow executed.

image

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.

image

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.

image

Here is the log of the Build & Deploy process from the recent run of the workflow:

image

and the final details on the Build and Deploy step:

image

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:

image

And here is the changed code (changing it right in the GitHub browser editor).

image

Commit the change:

image

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.

image

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:

image


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