# How to Deploy the ML-For-Beginners Quiz App to Azure Static Web Apps

> Deploy the ML For Beginners quiz app to Azure Static Web Apps. Learn how to use GitHub Actions to build assets and publish to Azure's global CDN for a seamless deployment.

- Repository: [Microsoft/ML-For-Beginners](https://github.com/microsoft/ML-For-Beginners)
- Tags: how-to-guide
- Published: 2026-02-28

---

**You can deploy the Vue 3 quiz application by configuring a GitHub Actions workflow that builds static assets from the `quiz-app/` directory and publishes the `dist` folder to Azure's global CDN.**

The microsoft/ML-For-Beginners repository hosts a Vue 3 single-page application (SPA) in the `quiz-app/` folder that serves interactive quizzes for machine learning concepts. Because the app consists only of static files (HTML, CSS, and JavaScript) after compilation, it is ideally suited for Azure Static Web Apps—a fully managed service that automatically provisions HTTPS, global edge caching, and CI/CD integration. When you link your GitHub repository to an Azure Static Web App instance, Azure generates a deployment workflow that builds and deploys the application on every push to your main branch.

## Understanding the Quiz App Structure

The quiz application is a pure frontend project located at the repository root in `quiz-app/`. It contains no server-side API dependencies, meaning the `api_location` parameter in the deployment configuration remains empty. The Vue CLI handles the build process, compiling source files from `quiz-app/src/` (including [`App.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/App.vue) and [`Quiz.vue`](https://github.com/microsoft/ML-For-Beginners/blob/main/Quiz.vue)) into optimized static assets ready for hosting.

Key configuration paths defined in [`quiz-app/README.md`](https://github.com/microsoft/ML-For-Beginners/blob/main/quiz-app/README.md) (lines 63-65) include:

- **`app_location`**: `/quiz-app` — the folder containing [`package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/package.json)
- **`api_location`**: `""` — empty because there is no Azure Functions backend
- **`output_location`**: `dist` — the default Vue CLI production build directory

## Configuring the GitHub Actions Workflow

Azure Static Web Apps uses GitHub Actions to automate builds and deployments. When you create a Static Web App in the Azure Portal and link it to your fork of the microsoft/ML-For-Beginners repository, Azure automatically commits a workflow file to `.github/workflows/azure-static-web-apps-<name>.yml`. You can also manually create this workflow file to control the CI/CD pipeline precisely.

The workflow relies on the `Azure/static-web-apps-deploy@v1` action and requires the `AZURE_STATIC_WEB_APPS_API_TOKEN` secret stored in your repository's GitHub Secrets. This token authenticates the workflow and allows it to upload built assets directly to your Azure Static Web App instance.

### Complete Workflow Example

Save the following as [`.github/workflows/azure-static-web-apps.yml`](https://github.com/microsoft/ML-For-Beginners/blob/main/.github/workflows/azure-static-web-apps.yml) in your repository root:

```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
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Install dependencies
        run: |
          cd quiz-app
          npm ci
      - name: Build
        run: |
          cd quiz-app
          npm run build
      - name: Deploy to Azure Static Web Apps
        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: "/quiz-app"
          api_location: ""
          output_location: "dist"

```

## The Deployment Pipeline

When you push changes to the `main` branch, GitHub Actions triggers the following automated process:

1. **Checkout**: The workflow checks out the repository code onto an Ubuntu runner.
2. **Node Setup**: Configures Node.js version 20 (matching the local development environment specified in the workflow) using `actions/setup-node@v3`.
3. **Dependency Installation**: Runs `npm ci` inside the `quiz-app` directory to install exact dependency versions from [`quiz-app/package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/quiz-app/package.json).
4. **Build**: Executes `npm run build`, which compiles the Vue application and outputs static files to `quiz-app/dist`.
5. **Deploy**: The `Azure/static-web-apps-deploy@v1` action uploads the contents of the `dist` folder to Azure, where it is immediately served from a globally distributed CDN.

The `quiz-app/.gitignore` file ensures that build artifacts in `dist` are not committed to version control, keeping the repository clean while the CI pipeline generates fresh assets for each deployment.

## Local Validation Before Deployment

Test your build locally to catch errors before committing:

```bash

# Navigate to the quiz app directory

cd quiz-app

# Install dependencies (equivalent to npm ci in CI)

npm install

# Create production build in ./dist

npm run build

# Serve the built app locally (optional)

npx serve -s dist

```

After running these commands, verify that `quiz-app/dist/` contains [`index.html`](https://github.com/microsoft/ML-For-Beginners/blob/main/index.html) and static assets. The entry point [`quiz-app/public/index.html`](https://github.com/microsoft/ML-For-Beginners/blob/main/quiz-app/public/index.html) serves as the root template for the Vue SPA.

## Summary

- The quiz app is a Vue 3 SPA located in `quiz-app/` that outputs static files to the `dist` directory.
- Configure `app_location` as `/quiz-app`, `api_location` as empty, and `output_location` as `dist` in your GitHub Actions workflow.
- Use the `Azure/static-web-apps-deploy@v1` action with the `AZURE_STATIC_WEB_APPS_API_TOKEN` secret to enable automated deployments.
- The workflow runs `npm ci` and `npm run build` from [`quiz-app/package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/quiz-app/package.json) on every push to `main`.
- Azure Static Web Apps automatically provides HTTPS, global CDN distribution, and custom domain support for the deployed quiz application.

## Frequently Asked Questions

### Does the quiz app require an API backend?

No. As implemented in microsoft/ML-For-Beginners, the quiz application is a pure static frontend with no server-side requirements. Set the `api_location` parameter to an empty string (`""`) in your deployment workflow, and Azure Static Web Apps will serve only the static assets from the `dist` folder.

### Which Node.js version should I specify in the workflow?

Specify Node.js 20 in your GitHub Actions workflow to match modern Vue 3 development standards. The `actions/setup-node@v3` step with `node-version: '20'` ensures compatibility with the dependencies listed in [`quiz-app/package.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/quiz-app/package.json) and prevents build failures caused by version mismatches.

### How do I update the quiz app after initial deployment?

Any push to the `main` branch automatically triggers the GitHub Actions workflow, rebuilds the application using `npm run build`, and deploys the new `dist` contents to Azure. Pull requests also trigger preview deployments, allowing you to review changes on a temporary URL before merging to production.

### Where is the production build stored locally?

The Vue CLI places production files in `quiz-app/dist/` when you run `npm run build`. This directory is listed in `quiz-app/.gitignore` to prevent committing build artifacts to version control. The CI pipeline generates this folder fresh during each deployment run and uploads its contents directly to Azure.