Building your first Azure Static Web App
Jamstack: a new generation of static Web content
With Jamstack there are no dependencies on app servers or technologies like node.js. Instead there’s only standard markup that can be built and tested anywhere and pushed to your servers as you update both content and code. This model works well with modern, devops-driven build processes, fitting in with CI/CD (continuous integration/continuous delivery) platforms such as GitHub, where collaborative development can happen in code branches before pull requests populate a deployment branch and an automated deployment to your site host.
That loosely coupled model makes a lot of sense when you’re thinking about adding front ends to cloud-native applications. Both front end and back end can scale independently, using low-latency metropolitan content delivery to cache markup near users, ready to take advantage of those CDN platforms’ cache tools to deliver Web applications to users without having to spin up multiple servers. If you’re using a service such as Azure, the model can offer significant cost savings, as well as reduce the lag between requesting and spinning up a host VM and delivering a response. As fast as Azure can be, it’s often still too slow to keep a customer engaged.
Introducing Azure Static Web Apps
Build 2020 saw Microsoft unveil its own platform for supporting Jamstack-style applications: Azure Static Web Apps. Available in preview, it brings together GitHub, Azure App Service, and Azure Functions in a single workflow, with a Visual Studio Code plug-in to drive development and deployment.
At the heart of the Azure Static Web Apps workflow are GitHub Actions, with a deployment action automatically created when you link your application repository to Azure. This action monitors a specific branch, and when commits are made to the branch it automatically runs a build and deploys the app to Azure. The same process runs when you merge a pull request.
You need both GitHub and Azure accounts to get started. Once these are set up, create a repository for your site. GitHub provides useful templates for common static Web application frameworks, including Angular, React, and Vue. Use these templates to set up scaffolding for a site that can be used to build an app. Repositories can be cloned to local development devices, giving developers access to their usual toolchain.
Building your first static Web app
Once you have a repository for your app with some code in place, go to the Azure Portal and create a new Static Web App. You can add it to an existing subscription or use a free trial, creating a new resource group or working with an existing one, giving your app a name and choosing a region. Next, sign in to your GitHub account in Azure to connect your repository. Choose the repository and branch you want to use. You can now create your Static Web App. In the portal, configure your app settings, including the build settings.
Once that’s all ready, review your settings and create the app. You can change settings by editing the workflow file that is created as part of the setup process. Initial setup should be very quick, with details of the site URL in the resource details.
With your app configured in both Azure and GitHub, the Azure Portal will inform you that it has not received any content yet and to check the status of your GitHub Actions. This link takes you back to your GitHub repository and the workflow that setting up your app has installed. When your code is complete and ready to deploy, run the workflow to build and deploy your site.
Adding API support with Azure Functions
Microsoft has released a preview of a Visual Studio Code extension for working with Azure Static Web Apps, though it only works in the preview Insider release at present. It integrates with the rest of the Visual Studio Code Azure tools, so you only have to log in once to use it. It’s a useful tool, especially if you’re integrating Azure Functions with your site, using them to host APIs for your applications and services.
async await support querying your API. A query is received by the API HTTP end point, which spins up and runs a Function, delivering a response to your application. You’re not limited to Azure Functions with Azure Static Web Apps. You can call any RESTful API and parse the resulting JSON in your code, in the browser.
There’s an interesting aspect to this model that touches another part of Microsoft’s developer story: Azure Static Web Apps are an excellent way to deploy both PWAs (progressive Web apps) and WebAssembly apps to users. Both involve delivering static content that then executes on a user’s computer. Using CDNs can significantly increase the reach of an app without needing to invest in significant infrastructure.
It’s easy to see a future where Visual Studio’s PWA tooling will automatically configure the appropriate workflow to use both GitHub and Azure Static Web Apps, going from editor to deployment in a few clicks of the mouse.