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

> Deploy the AI for Beginners quiz app to Azure Static Web Apps. Fork the repo, configure SWA, and use the GitHub Actions workflow for a seamless build and publish process.

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

---

**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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json).

### Fork the Repository

First, fork the [microsoft/AI-For-Beginners](https://github.com/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:

```bash
cd etc/quiz-app
npm install

```

Generate the production bundle:

```bash
npm run build

```

This command creates a `dist` directory containing the compiled static assets. According to the [`README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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:

```yaml
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) in the `etc/quiz-app/src` directory, which initializes the quiz component with the specified locale before rendering questions via [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue), which reads the locale parameter and initializes the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.