The first step on the journey is to get the Static Web App deployed. The Microsoft doc Quickstart: Building your first static site with Azure Static Web Apps offers a very helpful place to start.

Deployment

To get started I followed the steps in the guide referenced above. I wanted to use a single-page application (SPA) framework, such as React, Angular, or Vue and as I’ve had a small amount of experience with Vue in the past I decided to use that for this project.

The quickstart guide referenced above does a great job of documenting the process for getting an application deployed so I won’t repeat the content here. At a high level, the process involves:

1. Creating a new repo in GitHub based on a template repo that contains all of the code for a basic app in your chosen framework. In this case, that will be Vue.
2. Cloning said repo to your local machine.
3. Installing the Azure Static Web Apps extension to VS Code, if you don’t already have it.
4. Creating a new static web app within VS Code using that extension.
5. Deploying the app to Azure using the auto-generated GitHub Actions workflow.

It is worth noting that the auto-generated GitHub Actions workflow contains config for deploying when you push changes to your repo. That makes getting changes up to Azure a very slick process indeed.

If you followed the quickstart guide exactly, and named your repo “my-first-static-web-app”, then the static web app resource and the resource group it is deployed to will have the same name. If you did this, you should be able to navigate to the static web app in the Azure portal and find its URL. Put that URL into a browser you should see something like this:

Conclusion

What we’ve got here is very basic, but it’s a start. We can build on this later. The next step will be to look at how we can add an API.