Deploying a Frontend web app to Azure Static Web App with Pulumi


I have a Gatsby blog with GitHub Pages, now I want to deploy this to an Azure Static Web App. This should work with other frontend frameworks such as React, Angular, Vue, etc.

Create a infra folder in the project.

Run pulumi new azure-typescript in the infra directory to create a base project. (Pulumi needs an empty directory to create a project in. It’s also nice to keep the infrastructure code separate from the frontend code.)

Open the index.ts file and replace the contents with the following:

import * as pulumi from "@pulumi/pulumi";
import * as resources from "@pulumi/azure-native/resources";
import * as azure_native from "@pulumi/azure-native";
const config = new pulumi.Config();// Create an Azure Resource Group
const resourceGroup = new resources.ResourceGroup("blog");
const staticSite = new azure_native.web.StaticSite("staticSite", {
branch: "main",
location: "WestUS2",
name: "blog",
repositoryUrl: "",
repositoryToken: config.require("gh_token"),
sku: {
name: "Free",
tier: "Free",
export const url = staticSite.contentDistributionEndpoint;

GitHub Personal Access Token

Create a Personal Access Token in your GitHub account with the repo and workflow permissions. (Go to “Settings” > “Developer Settings” > “Personal Access Tokens”)

GitHub Personal Access Token settings

Set a Pulumi secret for the GitHub token just created by running the following CLI command in the Pulumi project directory, Pulumi encrypts and stores this in the file, making it safe to commit to the repo.

$ pulumi config set --secret gh_token ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

For more info on Pulumi secrets, visit this doc.

Log in to Azure CLI

Run az login in the terminal to sing into your Azure account if you haven’t already. This allows Pulumi to create the resources.

Run Pulumi

Run pulumi up to create the Azure Static Web App. Azure will also add a GitHub Action to your repo to continuously deploy changes to the main branch to the Azure SWA.

GitHub Action

Run pulumi destroy to clean up all resources once you’re done.

Bonza 👌 — If this helped you, please leave a clap for the algorithmic overlords.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store