# 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 with our guide. Configure build settings and use GitHub Actions for automated CI/CD. Get started today!

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

---

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

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

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.