{"id":66737,"date":"2023-02-01T16:12:33","date_gmt":"2023-02-01T15:12:33","guid":{"rendered":""},"modified":"2023-02-01T16:21:47","modified_gmt":"2023-02-01T15:21:47","slug":"using-github-actions-to-deploy-an-azure-static-web-app","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-gb\/industry\/blog\/technetuk\/2023\/02\/01\/using-github-actions-to-deploy-an-azure-static-web-app\/","title":{"rendered":"Using GitHub Actions to deploy an Azure Static Web App"},"content":{"rendered":"
\"A<\/figure>\n\n\n\n

In this article we will make a static web app and deploy to Azure using GitHub actions.<\/p>\n\n\n\n

What is a static web app?<\/h2>\n\n\n\n

In modern web development, the front end application that the user accesses in their browser is often purely HTML, CSS and JavaScript, meaning the application can be used entirely with the user\u2019s browser. This is a static web application and uses principals often referred to as JAM Stack (JavaScript, APIs, Markup). <\/p>\n\n\n\n

Any dynamic interactions are achieved by APIs hosted within separate applications, such as Azure Functions<\/a>. This allows the applications to be maintained and hosted separately with their own deployment pipelines.<\/p>\n\n\n\n

Separating the frontend to a static web app allows the hosting to be more lightweight than a full application, including server-side technologies, and supports a microservice architecture. <\/p>\n\n\n\n

In Azure, we can host our static application on Azure Static Web Apps<\/a>.<\/p>\n\n\n\n

Creating our Static Web App<\/h2>\n\n\n\n

Let\u2019s start by creating our repository in GitHub:<\/p>\n\n\n

\"An<\/figure>\n\n\n\n

I am going to use GitHub Codespaces<\/a> to build my application, but you can build on your own machine and commit to your repository using your preferred development tools. If using GitHub, you can click on the \u201cCode\u201d button and select \u201cCodespaces\u201d to set up a new space for this repo. Codespaces sets up a development environment in the cloud – if you have used Visual Studio Code, this will look very familiar!<\/p>\n\n\n

\"A<\/figure>\n\n\n\n

I am most experienced with .NET technologies so I am going to use a Blazor Web Assembly as my static web app here, but you can use your preferred framework such as React or Vue.<\/p>\n\n\n\n

In the Codespaces \u201cterminal\u201d tab, run dotnet new blazorwasm<\/em> to create a templated Blazor application with some sample pages.<\/p>\n\n\n

\"A<\/figure>\n\n\n\n

Now, if we look at the files in the file directory, we can see the folders and files for the template application. Let\u2019s see what it looks like in browser – run dotnet run<\/em> and it will build and run on a localhost port. <\/p>\n\n\n\n

Of course, in a real application we would make a lot of changes before being ready for deployment, but for now we can commit and push our changes to our GitHub repo.<\/p>\n\n\n

\"An<\/figure>\n\n\n\n

Creating your Static Web App<\/h2>\n\n\n\n

Now that we have our application running locally and pushed to our repo, let\u2019s get our Azure Static Web App ready to deploy to. Within Azure create a resource of type \u201cStatic Web App\u201d, selecting the relevant details for your subscription, resource group, plan type and region.<\/p>\n\n\n\n

You will have an option to choose where to deploy from. In this example I am choosing my GitHub repo but you can also link to Azure DevOps or another source control. You can also deploy to your application using the Azure SWA CLI but in this example I want to show the integration with GitHub.<\/p>\n\n\n

\"Filling<\/figure>\n\n\n\n

When selecting GitHub, I am asked to authenticate to my GitHub account and select the repo and branch. As previously mentioned, you can choose your relevant framework, Blazor in my example. You can tell it which folder within your repo to use in your deployment, as well as any API links such as Azure Functions (but we have static client side assets only in our example). We can then select \u201creview + create\u201d and let Azure takeover.<\/p>\n\n\n

\"A<\/figure>\n\n\n\n

Initially, your application will look like this holding page:<\/p>\n\n\n

\"A<\/figure>\n\n\n\n

While Azure creates the SWA resource, you will see a new commit with a .yml file in your GitHub repo. This represents a GitHub Action, a workflow that can automatically run on push or PR for example. If you haven\u2019t worked with .yml or Actions before, this is a great way to understand how they work. The auto-generated one has configuration for deploying to Azure on push to your repo. Let\u2019s check the \u201cActions\u201d tab and we\u2019ll see it working on our deployment:<\/p>\n\n\n

\"The<\/figure>\n\n\n\n

You can take a look at the .yml file in this example over on GitHub<\/a>.<\/p>\n\n\n\n

Now that we have run this Action successfully, lets refresh our Azure Static Web App and (*drumroll*)… it\u2019s now showing our Blazor application! Our GitHub pipeline was successful and will auto deploy on push to main.<\/p>\n\n\n

\"The<\/figure>\n\n\n\n

Reviewing your PRs on preview environments<\/h2>\n\n\n\n

One feature I find really powerful on Azure SWA is the ease of preview environment creation. First, if we look at our .yml file, we can see there is a workflow for pull request creation. To test this out, I am back to my codebase and make a change to the menu colour and commit the changes to a branch. We can then create a Pull Request from this branch.<\/p>\n\n\n\n

If we have a look on the Actions tab again, we\u2019ll see it\u2019s running on my \u201cexample-branch\u201d.<\/p>\n\n\n

\"The<\/figure>\n\n\n\n

Once this completes, we can see a URL in the detail of the Action workflow. This is the deployment location of the preview environment for this PR on Azure, with the main branch still being on the original SWA URL. I love this feature as it means that as well as reviewing code in a PR, we can also view the changes on a live web app as part of our review. We could also share the link with project stakeholders to get immediate feedback before merge and deployment to main.<\/p>\n\n\n\n

Here we can see both of the deployed web apps from the main branch and PR branch side by side:<\/p>\n\n\n

\"The<\/figure>\n\n\n\n

From within the Azure portal, you can see all your active environments in the \u201cenvironments\u201d tab. Here we can see the production URL (based on main branch) and any preview environments (my \u201cexample- branch\u201d in this example):<\/p>\n\n\n

\"The<\/figure>\n\n\n\n

Once the reviewer is happy with the changes, they can approve and merge. Once merged, the GitHub action will automatically close the PR preview environment and deploy the changes to the main static web app.<\/p>\n\n\n\n

Summary<\/h2>\n\n\n\n

And just like that, we have created a new application and deployed it to Azure Static Web Apps! As shown, with GitHub actions we can create reliable and repeatable deployment and review workflows using .yml configuration. <\/p>\n\n\n\n

Hopefully this has given you an overview of the benefits of these tools and will let you integrate to your own processes. Have fun!<\/p>\n\n\n\n

Learn more<\/h2>\n\n\n