How to Deploy the AI for Beginners Quiz App to Azure Static Web Apps

You can deploy the AI for Beginners quiz app to Azure Static Web Apps by forking the Microsoft repository, configuring the SWA resource to build from the etc/quiz-app directory, and using the auto-generated GitHub Actions workflow that compiles the Vue 2 application and publishes the dist folder on every push.

The AI for Beginners repository by Microsoft includes an interactive quiz application built with Vue 2 that helps learners test their knowledge of artificial intelligence concepts. Located in the etc/quiz-app directory, this single-page application compiles into a static bundle suitable for serverless hosting. This guide explains exactly how to deploy the AI for Beginners quiz app to Azure Static Web Apps using automated CI/CD pipelines and the official build configuration.

Prerequisites and Local Validation

Before creating Azure resources, verify that the quiz application builds correctly on your local machine. The project uses standard Vue CLI tooling defined in etc/quiz-app/package.json.

Fork the Repository

First, fork the microsoft/AI-For-Beginners repository to your personal GitHub account. Azure Static Web Apps requires write access to configure deployment secrets and GitHub Actions workflows.

Verify the Build Locally

Navigate to the quiz application directory and install dependencies:

cd etc/quiz-app
npm install

Generate the production bundle:

npm run build

This command creates a dist directory containing the compiled static assets. According to the README.md in etc/quiz-app, this folder contains the production-ready files that Azure Static Web Apps will serve.

Configuring the Azure Static Web App

The deployment process centers on pointing Azure to the correct source and output locations within your repository.

Portal Configuration Steps

1. In the Azure portal, create a new Static Web App resource.
2. Select GitHub as the deployment source and authorize Azure to access your forked repository.
3. Configure the build settings exactly as follows:
   • App location: etc/quiz-app (the folder containing the Vue source and package.json)
   • Api location: leave empty (the quiz app is purely static with no serverless API)
   • Output location: dist (the folder generated by npm run build)

Azure uses these paths to construct the CI/CD pipeline. The app_location tells the build agent where to run npm install, while output_location specifies which folder contents to upload to the static hosting endpoint.

Understanding the GitHub Actions Workflow

Upon completing the portal wizard, Azure automatically commits a workflow file to .github/workflows/azure-static-web-apps-<name>.yml in your repository.

Workflow Structure

The generated workflow triggers on every push to your selected branch (typically main). It uses the official Azure Static Web Apps deploy action:

name: Azure Static Web Apps CI/CD

on:
  push:
    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 AZURE_STATIC_WEB_APPS_API_TOKEN is automatically added to your repository secrets during the Azure portal setup. This token authenticates the GitHub Actions runner to publish assets to your specific SWA instance.

Build Process Explanation

When you push changes to the monitored branch, the workflow executes the following sequence as implemented in etc/quiz-app:

1. Checks out the repository code
2. Detects the package.json in etc/quiz-app and runs npm install
3. Executes npm run build to generate the production bundle in dist
4. Uploads the contents of dist to the Azure Static Web Apps endpoint

You can monitor build progress in the Actions tab of your GitHub repository or in the Azure portal Deployment Center.

Post-Deployment Configuration

Once the initial workflow completes, Azure provides a public URL (e.g., https://<app-name>.websites.net) where the quiz app is live.

Accessing Localized Quiz Versions

The application supports multiple languages through JSON translation files stored in etc/quiz-app/src/assets/translations. To load a specific language version, append the loc query parameter to the URL:

https://<your-app>.azurestaticapps.net/?loc=es

This parameter is handled by App.vue in the etc/quiz-app/src directory, which initializes the quiz component with the specified locale before rendering questions via Quiz.vue.

Summary

• The AI for Beginners quiz app is a Vue 2 single-page application located in the etc/quiz-app directory of the Microsoft repository.
• Azure Static Web Apps can host the app directly by configuring App location as etc/quiz-app and Output location as dist.
• The deployment uses an auto-generated GitHub Actions workflow that runs npm install and npm run build on every push to your main branch.
• No API location is required because the quiz functions entirely as a static client-side application.
• Multi-language support is available via URL parameters (e.g., ?loc=es) leveraging translation assets in src/assets/translations.

Frequently Asked Questions

Do I need to set up an Azure Functions API for the quiz app?

No. The quiz application is a purely static Vue 2 single-page app. According to the source code in etc/quiz-app/README.md, you should leave the Api location field empty during Azure Static Web Apps creation. The app loads quiz data from static JSON translation files in src/assets/translations rather than calling a serverless backend.

What npm build command does the Azure workflow use?

The GitHub Actions workflow automatically detects the package.json in your etc/quiz-app folder and executes npm install followed by npm run build. This behavior is standard for Azure Static Web Apps when deploying Node.js applications. The build script, defined in the quiz app's package.json, compiles the Vue 2 source into the dist directory.

How do I change the quiz language after deploying to Azure?

Append the loc query parameter to your application's URL. For example, adding ?loc=es loads the Spanish translation, while ?loc=zh loads Chinese. This functionality is implemented in etc/quiz-app/src/App.vue, which reads the locale parameter and initializes the Quiz.vue component with the corresponding translation file from src/assets/translations.

Can I deploy the quiz app without using GitHub Actions?

While the automated workflow is the recommended approach, you can manually deploy using the Azure Static Web Apps CLI (swa). First build the app locally with npm run build in the etc/quiz-app directory, then use the CLI to deploy the dist folder directly. However, this bypasses the continuous deployment benefits of the GitHub Actions integration described in the repository's deployment documentation.

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