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

> Deploy your Vue 2 quiz app to Azure Static Web Apps with this comprehensive guide. Learn how to leverage GitHub Actions for automated builds and deployments.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-03

---

**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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) [lines 49-80](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md#deploying-to-azure):

### 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md#example-workflow-file):

```yaml
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) lives
- `output_location: "dist"` — Matches the build output directory in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) | Complete deployment guide with troubleshooting | [View source](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) |
| [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) | Build scripts (`serve`, `build`, `lint`) and dependencies | [View source](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) |
| `.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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue) | Root Vue component containing all quiz logic | [View source](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue) |

## 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.