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

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 and Quiz.vue) into optimized static assets ready for hosting.

Key configuration paths defined in quiz-app/README.md (lines 63-65) include:

• app_location: /quiz-app — the folder containing 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 in your repository root:

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.
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:

# 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 and static assets. The entry point 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 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 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.

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