How to Deploy the Quiz App to Azure Static Web Apps: A Complete Guide

The Quiz App is a Vue 2 single-page application in etc/quiz-app/ that deploys to Azure Static Web Apps through an auto-generated GitHub Actions workflow that builds the dist folder on every push.

Deploying the Microsoft AI-For-Beginners quiz application to Azure Static Web Apps (ASWA) creates a fully managed, globally distributed hosting environment with continuous deployment. This guide walks through the exact configuration used in the repository, including build settings, workflow structure, and file paths straight from the source code.

What Is Azure Static Web Apps?

Azure Static Web Apps provides serverless hosting for static front-ends with integrated CI/CD from GitHub. When you deploy the quiz app, Azure automatically:

• Runs npm install and npm run build on every commit
• Serves the generated dist folder from a global CDN
• Manages authentication through AZURE_STATIC_WEB_APPS_API_TOKEN stored in GitHub Secrets

Architecture Overview

Component	Role
Azure Static Web Apps service	Hosts static files, global edge CDN, custom domains, authentication
GitHub repository	Source of truth for the Vue app; triggers CI/CD on commits
GitHub Actions workflow (azure-static-web-apps-*.yml)	Builds and deploys using Azure/static-web-apps-deploy@v1
dist/ folder	Output of npm run build; contains minified assets Azure serves
Optional API folder	Serverless Azure Functions deployed alongside static content

Step-by-Step Deployment Guide

Follow these six steps to deploy the quiz app, as documented in etc/quiz-app/README.md lines 49-80:

1. Fork the Repository

Create your own copy of microsoft/AI-For-Beginners so Azure can access your source code.

2. Create an Azure Static Web App

In the Azure portal, navigate to "Create a resource" → "Static Web App".

3. Connect to GitHub

Select GitHub as the source, then choose your fork along with:

• Organization
• Repository
• Branch (typically main)

4. Configure Build Settings

Setting	Value	Description
App location	etc/quiz-app	Folder containing package.json
API location	(leave blank)	Optional Azure Functions path
Output location	dist	Folder produced by npm run build

5. Review and Create

Azure generates .github/workflows/azure-static-web-apps-<name>.yml automatically. This file appears in your fork after provisioning.

6. Monitor Deployment

Check the GitHub Actions tab. A successful run publishes your quiz app to the Azure-provided URL.

Understanding the GitHub Actions Workflow

The auto-generated workflow runs on every push to main and every pull request. Here's the exact structure from the README lines 92-119:

name: Azure Static Web Apps CI/CD
on:
  push:
    branches: [ main ]
  pull_request:
    types: [ opened, synchronize, reopened, closed ]
    branches: [ main ]

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
      - name: Build And Deploy
        id: builddeploy
        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: "etc/quiz-app"
          api_location: ""
          output_location: "dist"

Critical configuration details:

• app_location: "etc/quiz-app" — Points to the Vue project root where package.json lives
• output_location: "dist" — Matches the build output directory in etc/quiz-app/package.json
• azure_static_web_apps_api_token — Auto-generated secret; never hard-code this value

Key Files for Deployment

File	Purpose	Location
etc/quiz-app/README.md	Complete deployment guide with troubleshooting	View source
etc/quiz-app/package.json	Build scripts (serve, build, lint) and dependencies	View source
.github/workflows/azure-static-web-apps-*.yml	Auto-generated CI/CD pipeline (appears after ASWA provisioning)	/.github/workflows/ in your fork
etc/quiz-app/src/App.vue	Root Vue component containing all quiz logic	View source

Troubleshooting Common Issues

Build Fails with "package.json Not Found"

Verify app_location is set to etc/quiz-app, not the repository root. The quiz app is nested inside the etc/ directory, separate from the main AI curriculum content.

Deployment Succeeds But Site Shows 404

Check output_location matches your build output. For this Vue 2 project, npm run build produces a dist folder by default. If you modified vue.config.js, update the output location accordingly.

Token Expiration or Authentication Errors

The AZURE_STATIC_WEB_APPS_API_TOKEN is managed automatically. If deployment fails with authentication errors:

• Verify the secret exists in Settings → Secrets and variables → Actions
• Regenerate the token from the Azure portal if necessary

Performance and Regional Distribution

Once deployed, Azure Static Web Apps serves your quiz application from multiple edge locations globally. The dist folder containing minified HTML, CSS, and JavaScript from etc/quiz-app/src/App.vue and related components is replicated across the CDN automatically—no additional configuration required for basic static hosting.

Summary

• The quiz app lives in etc/quiz-app/ as a Vue 2 single-page application
• Azure Static Web Apps deploys through GitHub Actions with zero manual build steps
• Configure app_location: "etc/quiz-app" and output_location: "dist" during ASWA setup
• The workflow uses Azure/static-web-apps-deploy@v1 with auto-generated authentication tokens
• Every push to main triggers a fresh build and global CDN deployment

Frequently Asked Questions

What happens if I change the Vue build output directory?

If you modify vue.config.js to output to a folder other than dist, you must update the output_location parameter in your GitHub Actions workflow. Mismatch between build output and configured location causes deployment failures.

Can I add a serverless API to the quiz app?

Yes. Create an api folder with Azure Functions, then set api_location: "api" (or your chosen path) in the workflow. The Azure/static-web-apps-deploy@v1 action deploys both static content and API functions in a single operation.

Do I need to manually create the GitHub Actions workflow file?

No. Azure generates .github/workflows/azure-static-web-apps-<name>.yml automatically when you create the Static Web App resource in the Azure portal. The file appears in your fork after you complete the GitHub authorization step.

Why does the deployment require forking instead of using the original repository?

Azure Static Web Apps requires write access to create the workflow file and store the AZURE_STATIC_WEB_APPS_API_TOKEN secret. Forking gives you ownership of both the repository and the deployment pipeline, which the original microsoft/AI-For-Beginners repository cannot provide to external users.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}