Deploying the AI-For-Beginners Quiz App to Azure Static Web Apps: Configuration Guide

Deploy the AI-For-Beginners quiz-app to Azure Static Web Apps by configuring the build settings to use etc/quiz-app as the app location and dist as the output location, leveraging the Azure/static-web-apps-deploy@v1 GitHub Action for automated CI/CD.

The quiz-app in the microsoft/AI-For-Beginners repository is a Vue 2.x application that delivers pre- and post-lecture quizzes for the curriculum. When deploying quiz-app to Azure Static Web Apps, you must correctly map the repository structure to Azure's build expectations. This guide covers the exact configuration values and workflow setup needed to host the static assets generated in the etc/quiz-app/dist/ directory.

What is the Quiz-App?

The quiz-app is a client-side Vue 2.x web application located in etc/quiz-app/ within the repository. It consists of:

• Source code: Vue components in etc/quiz-app/src/
• Build configuration: Webpack-based setup defined in etc/quiz-app/package.json
• Static output: Compiled assets generated in etc/quiz-app/dist/ after running npm run build

Unlike dynamic applications requiring server-side rendering, this app produces static files suitable for Azure Static Web Apps' global content delivery network.

Prerequisites and Repository Structure

Before configuring the deployment, ensure you have:

1. A fork or clone of the microsoft/AI-For-Beginners repository on GitHub
2. An active Azure subscription with permissions to create Static Web Apps resources
3. Node.js installed locally for testing builds

Key directories referenced during configuration:

• etc/quiz-app/ — Root of the Vue application containing package.json and source files
• etc/quiz-app/dist/ — Build output directory that Azure will serve
• .github/workflows/ — Location where Azure automatically generates the deployment workflow

Azure Static Web Apps Configuration Steps

Forking the Repository

Azure Static Web Apps requires integration with a GitHub repository to enable continuous deployment. Fork the microsoft/AI-For-Beginners repository to your GitHub account so you can link it to Azure and receive the automated workflow file.

Creating the Azure Static Web App Resource

In the Azure portal, create a new Static Web App and specify:

• Source: GitHub
• Repository: Your fork of microsoft/AI-For-Beginners
• Branch: main (or your primary branch)
• Build Preset: Vue (or "Other" if customizing)

During creation, Azure prompts for build details that map the repository structure to the deployment engine.

Configuring Build Settings

Set these specific values in the Azure portal Build tab:

• App location: etc/quiz-app — Points to the directory containing the Vue source code and package.json
• Api location: Leave empty — The quiz-app has no serverless API dependencies
• Output location: dist — The folder generated by npm run build containing the static assets

These settings tell the Azure/static-web-apps-deploy@v1 action where to find source code and where to locate the compiled files for upload.

Understanding the GitHub Actions Workflow

Once configured, Azure automatically commits a workflow file to .github/workflows/azure-static-web-apps-<name>.yml. This workflow triggers on every push to the main branch and executes:

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
    steps:
      - uses: actions/checkout@v2
      - 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: "etc/quiz-app"
          api_location: ""
          output_location: "dist"

The app_location parameter targets etc/quiz-app where the Vue application resides, while output_location references dist relative to that directory. The action runs npm install and npm run build automatically before deploying the contents of dist/ to Azure's edge network.

Local Build and Testing

Verify the build locally before deploying to catch configuration errors:

cd etc/quiz-app
npm install
npm run build

This generates the dist/ folder with static assets. If this step succeeds locally, the Azure Static Web Apps build environment will produce identical output, ensuring your deployment configuration matches the expected artifact structure.

Summary

• The quiz-app resides in etc/quiz-app/ and is built with Vue 2.x, outputting static files to dist/
• Configure Azure Static Web Apps with app_location: "etc/quiz-app" and output_location: "dist" to match the repository structure
• Azure automatically generates a GitHub Actions workflow using Azure/static-web-apps-deploy@v1 for CI/CD
• Leave the API location empty as the quiz-app requires no serverless backend
• Test builds locally with npm run build before pushing to ensure the dist/ directory generates correctly

Frequently Asked Questions

What build preset should I choose for the quiz-app?

Select Vue as the build preset when creating the Azure Static Web App. If Vue is unavailable in your region's portal version, choose Other and ensure your package.json in etc/quiz-app includes the standard Vue build scripts. The preset affects how Azure interprets build commands, but the explicit app_location and output_location settings ultimately control the deployment.

Why does the workflow fail with "cannot find dist folder"?

This error occurs when the output location configuration does not match the actual build output path. Ensure you set output_location: "dist" in the Azure portal and that npm run build outputs to a folder named dist within etc/quiz-app/. The path is relative to the app_location, so etc/quiz-app/dist must exist after the build completes.

Can I deploy the quiz-app without using GitHub Actions?

While Azure Static Web Apps primarily relies on GitHub Actions for automatic deployment, you can deploy manually using the Azure CLI or Azure DevOps tasks. However, the repository's documented workflow uses the Azure/static-web-apps-deploy@v1 GitHub Action because it provides integrated CI/CD with automatic branch previews and seamless secret management through GitHub Secrets.

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

Simply push changes to the main branch of your forked repository. The GitHub Actions workflow triggers automatically, rebuilds the application using the configuration in etc/quiz-app, and deploys the new dist/ contents to your live URL. Azure Static Web Apps handles cache invalidation and global distribution automatically, making updates instantaneous across all regions.

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