Created: 8/12/2025 11:16
Updated: 8/12/2025 13:34
Exported: 8/12/2025 13:34

Give me step by step instructions for creating and deploying to an Azure Static Web App. I already have an Azure account and a React app on GitHub that I wish to deploy

Thought for 1m 4s

I need to gather the most up-to-date guidance for deploying to Azure Static Web Apps since documentation might change over time. I'll use a web search to ensure I’m providing the latest info, including GitHub Actions, React build commands, and folder structure details. I'll also double-check any specifics the user needs clarified.

I'll assume we’re dealing with either a CRA or Vite React app. I’ll lay out the steps for both, including how to create the Static Web App in the Azure portal, connect a GitHub repo, and set build options. I'll also provide CLI commands and manual setup details for GitHub Actions, checking if the Azure CLI has the needed extensions.

Searching Azure docs for Static Web App deployment

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-react

https://docs.github.com/en/actions/how-tos/deploy/deploy-to-third-party-platforms/azure-static-web-app

https://github.com/Azure/static-web-apps-deploy

https://www.google.com/s2/favicons?domain=https://docs.azure.cn&sz=32

To deploy a React app to Azure Static Web Apps, I'll provide step-by-step instructions for both the Azure portal and CLI. This includes app location, API location, and output folder settings. I'll also explain how GitHub Actions workflow is created. I’ll share the GitHub Actions workflow example, troubleshoot tips, and helpful references from GitHub and Microsoft Docs.

Searching for Azure Static Web Apps GitHub Action secrets

https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration

https://docs.github.com/en/actions/how-tos/deploy/deploy-to-third-party-platforms/azure-static-web-app

https://github.com/Azure/static-web-apps/issues/1591

Searching resources for deploying React app step-by-step

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-react

The deployment documentation provides clear steps for using the portal, with values specified. I’ll include the correct build configuration page as a reliable citation too. It seems important to open these sources to give precise and accurate resources for the user, including essential settings and configurations.

Opening and citing portal and build configuration pages

https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration

Opening GitHub docs for GitHub Actions workflow

https://www.google.com/s2/favicons?domain=https://docs.github.com&sz=32

https://docs.github.com/en/actions/how-tos/deploy/deploy-to-third-party-platforms/azure-static-web-app

Opening CLI Quickstart for Azure Static Web Apps

https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-cli

I'll walk through the steps for deploying a React app using Azure CLI. First, prepare the repo, ensuring it has the correct scripts for React or Vite. Then, use the Azure Portal to create the Static Web App, and note that GitHub Actions workflow is created. I'll also share troubleshooting tips related to Node version and build commands.

Searching Azure CLI static web app creation examples

https://learn.microsoft.com/en-us/cli/azure/staticwebapp?view=azure-cli-latest

https://www.dotnetthailand.com/cloud-hosting/azure/azure-static-web-apps/

https://azure.github.io/static-web-apps-cli/docs/cli/swa-deploy

Configuring CLI, Deployment Tokens, and Documentation Steps

https://learn.microsoft.com/en-us/azure/static-web-apps/deployment-token-management

I should mention the production branch for deployments and preview environments for pull requests. It's also important to include information on configuring routes in staticwebapp.config.json for SPA fallback, as many React apps require this for client-side routing. I'll check the docs to confirm these details.

Searching Azure SWA docs for SPA fallback configuration

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration

https://github.com/Azure/static-web-apps/issues/438

https://stackoverflow.com/questions/66110316/azure-static-app-route-configuration-with-react-router

It’s a good idea to recommend creating a staticwebapp.config.json file with the navigationFallback set to rewrite to index.html and excluding static files. I should also include steps for setting environment variables and secrets—using Azure Portal Configuration or GitHub secrets for deployment tokens, and app settings under Configuration in Azure Portal.

Searching Azure Static Web Apps environment variables setup

https://learn.microsoft.com/en-us/azure/static-web-apps/application-settings

https://azure.github.io/static-web-apps-cli/docs/cli/env-vars/

https://stackoverflow.com/questions/65749078/azure-static-web-app-environment-variable

I should mention that for front-end build time variables, they can be set in the GitHub workflow environment or in the build configuration. Note that Create React App requires environment variables to be prefixed with REACT_APP_. Also, it'll be important to distinguish between build-time and runtime variables.

Searching for REACT_APP_ environment variables in Azure

https://learn.microsoft.com/en-us/answers/questions/1365750/to-access-react-app-%2A-environment-variables-within

https://medium.com/%40jamescori/azure-static-site-deployment-with-environment-variables-8882c33bd426

https://stackoverflow.com/questions/76212675/how-do-i-correctly-and-securely-set-environment-variables-for-an-azure-swa-hos

For React front-end build time variables, these should be injected during the build step via GitHub Actions or .env files. Azure Portal environment variables are for APIs, not front-end. We should explicitly state this distinction, cite the relevant resources, and provide examples for setting up the app, both via GUI and CLI. We'll ensure these details fit within five citations.

I need to cite the most important steps for clarity and accuracy. This will include the Portal creation process, GitHub Actions workflow and API token setup, build config settings, Azure CLI quickstart guide, and environment variables specific to React builds. I'll select the five most relevant citations for these.

I need to properly cite the environment variables and how portal env vars apply to the backend only, while build-time environment variables should be included in the workflow. I'll focus on picking the top 5 most relevant documents to back up these key steps, pausing on which is more crucial between application settings and environment variables.

It's crucial that I clarify the environment variable distinction—front-end variables need to be set at build time, while Azure portal settings don't apply to React. I'll back this up with relevant sources and throw in an extra citation for the staticwebapp.config.json fallback. I can go with 6 citations, which is allowed.

Done

Nice — let’s get your React app from GitHub onto Azure Static Web Apps. Below I’ll give a compact, step-by-step guide with both the Azure Portal (GUI) and Azure CLI methods, the important GitHub Actions bits (the workflow Azure creates), SPA routing config you’ll likely need, and troubleshooting tips. I’ll assume your repo has a standard React build script (npm run build for Create React App) on the branch you want to deploy (e.g. main).

1. Repo on GitHub and branch to deploy (e.g. main).
2. package.json contains a build script (e.g. "build": "react-scripts build" or "build": "vite build").
3. Confirm which build output folder your tool uses:
   • Create React App → build
   • Vite → dist
4. You have access to the Azure subscription you’ll provision into.

1. In the Azure Portal → Create a resource → search Static Web App → Create.
2. In Basics choose subscription, resource group, name and Plan (Free is fine for many apps). Under Source pick GitHub and sign in/authorize Azure to access your repos. Microsoft Learn
3. Pick your GitHub Organization, Repository and Branch (e.g. main). Microsoft Learn
4. In Build Details choose the Build preset = React (or “Other” if you’ll set values yourself). Typical values for a CRA app:
   • App location: / (or the subfolder where your client code lives)
   • Api location: leave empty if you have no Azure Functions
   • App artifact location (output): build (for CRA) — for Vite use dist.
     These values are editable later in the generated workflow. Microsoft Learn+1
5. Click Review + create → Create. Azure will provision resources and create a GitHub Actions workflow in your repo (.github/workflows/azure-static-web-apps-<RANDOM>.yml) to build and deploy automatically. Microsoft Learn+1
6. After creation, open the Static Web App resource’s Overview and click the generated GitHub Action run (or go to your repo → Actions) and watch the build/deploy. When the workflow succeeds, the site URL appears in the portal. Microsoft Learn

(Useful for automation / IaC.)

1. Install Azure CLI (and log in):
   az login
2. Create a resource group (example):

   az group create --name mySwaRG --location westeurope
   

3. Create the Static Web App that connects to your GitHub repo (interactive GitHub auth is available):
   Example (interactive login with GitHub):

   az staticwebapp create \
     --name my-static-app-name \
     --resource-group mySwaRG \
     --location westeurope \
     --source https://github.com/yourname/your-repo \
     --branch main \
     --login-with-github
   

   Alternatively you can pass a GitHub PAT with --token. Azure will create the workflow in your repo similar to the portal flow. Microsoft Learn+1

When Azure creates the app it drops a workflow like this under .github/workflows/azure-static-web-apps-<RANDOM>.yml. Key parts you need to know:

• The action that performs the build + deploy is Azure/static-web-apps-deploy@v1 (it builds using Oryx or your build command and uploads the output). GitHub DocsMicrosoft Learn
• The workflow exposes three important variables you usually edit:
  • APP_LOCATION — where your client source is (e.g. / or client/)
  • API_LOCATION — if you have Functions (otherwise empty)
  • OUTPUT_LOCATION — the build artifact folder (CRA → build, Vite → dist)
• If your build command is non-standard, add app_build_command or set a custom with: app_build_command: 'npm run build:prod' in the action. Microsoft Learn

Minimal relevant YAML snippet (trimmed):

env:
  APP_LOCATION: "/"         # repo root (change if your app is in a subfolder)
  API_LOCATION: ""          # leave blank if no API
  OUTPUT_LOCATION: "build"  # CRA: build, Vite: dist

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: ${{ env.OUTPUT_LOCATION }}

(You’ll find a full template in your repo after Azure provisions the app.) GitHub DocsMicrosoft Learn

• Azure creates a repository secret named something like AZURE_STATIC_WEB_APPS_API_TOKEN_<RANDOM> or instructs you to create AZURE_STATIC_WEB_APPS_API_TOKEN. The workflow uses that secret to authenticate deployments. If you ever reset the token in the portal, update the secret in your repo. See Manage deployment token in the portal to copy/reset the token. GitHub DocsMicrosoft Learn

If your React app uses client-side routing (React Router), add staticwebapp.config.json into your app artifact root (the folder you set as output_location) so deep links rewrite to index.html. Example minimal file:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/static/*", "/images/*", "*.css", "*.js"]
  }
}

Place that file so it ends up at the root of the deployed artifact (for CRA that means in /build/staticwebapp.config.json or have your build copy it to build/). Docs: staticwebapp.config.json → routing/navigationFallback. Microsoft LearnStack Overflow

• Backend (Azure Functions) / runtime secrets: set these in the Azure Portal under your Static Web App → Configuration (Environment variables). These apply to the API runtime. Microsoft Learn
• Frontend (React) variables: React is a static frontend — any env value that is referenced inside your JS must be available at build time (in your GitHub Actions job or via .env files). Azure Portal environment settings do not magically get injected into your built static JS for the client — you must pass them into the build step (e.g. via env: in the workflow or expanding secrets into the build command). Also, for Create React App, vars must be prefixed with REACT_APP_. Microsoft Learn+1

• Build fails because OUTPUT_LOCATION is wrong → open the workflow in .github/workflows/…yml and set output_location to the folder your tool produces (build vs dist). Microsoft Learn
• azure_static_web_apps_api_token invalid → regenerate token in portal (Overview → Manage deployment token), update GitHub secret, re-run workflow. Microsoft Learn
• Client side routing 404 on refresh → add staticwebapp.config.json with navigationFallback as above. Microsoft Learn
• Environment variables undefined in your front-end → ensure the variable is provided to the build step (via workflow env: or by writing into a .env during the Actions run). Portal settings alone won’t inject values into the compiled bundle. Microsoft Learn

• In Azure Portal your Static Web App overview shows the default hostname / site URL. From CLI you can query it:

az staticwebapp show --name <APP_NAME> --resource-group <RG> --query "defaultHostname" -o tsv

Once the GitHub Actions job finishes successfully, visit that URL. Microsoft Learn

• The Static Web Apps CLI (swa / @azure/static-web-apps-cli) can emulate and deploy locally and can print a deployment token for CI usage (swa deploy --print-token). Use swa deploy if you want to push a local build quickly. (Be careful not to commit tokens.) Azure

If you want, I can:

• Inspect your repo and give the exact values you should set for APP_LOCATION / OUTPUT_LOCATION and a ready-to-paste workflow snippet (I’ll need the repo path and which branch), or
• Generate a staticwebapp.config.json tuned for your CRA/Vite setup and client routing rules.

Which of those would help you next? 👇

Powered by ChatGPT Exporter