# How to Deploy the Vue.js Quiz App to Azure Static Web Apps: Complete CI/CD Guide

> Deploy your Vue.js quiz app to Azure Static Web Apps with this complete CI/CD guide. Learn to configure build outputs and enable automated GitHub Actions for seamless deployments.

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

---

**The Vue.js quiz application in the `microsoft/AI-For-Beginners` repository deploys to Azure Static Web Apps by configuring the build to output the `dist` folder from the `etc/quiz-app` directory, enabling automated CI/CD through GitHub Actions.**

The `microsoft/AI-For-Beginners` repository includes an interactive quiz application built with Vue.js 2, located in the `etc/quiz-app` folder. You can deploy Vue.js quiz app to Azure Static Web Apps using the built-in npm scripts and a GitHub Actions workflow that automatically builds and publishes the static assets to Azure's globally distributed edge network.

## Understanding the Vue.js Quiz Application Structure

The quiz application is a standard Vue 2 project contained within `etc/quiz-app` at the repository root. According to the source code in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json), the project uses Vue CLI service commands to manage the build lifecycle.

The build process generates static files in the `dist` directory, which Azure Static Web Apps serves directly without requiring server-side rendering.

## Build Configuration for Azure Static Web Apps

Before deploying, the application must compile into static assets. In [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json), the build script uses `vue-cli-service build` to create production-ready files.

```json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

```

Running `npm run build` generates the `dist` folder containing optimized HTML, CSS, and JavaScript bundles. Azure Static Web Apps requires this output location configuration during setup.

## Configuring Azure Static Web Apps Deployment

When creating a Static Web Apps resource in the Azure Portal, you configure three critical settings specific to this repository structure:

1. **App location**: Set to `etc/quiz-app` to point to the folder containing the Vue source code
2. **Output location**: Set to `dist` to match the build output directory generated by Vue CLI
3. **Framework preset**: Select *Vue* to automatically detect the appropriate build commands

These settings tell Azure which npm scripts to execute and where to find the deployable artifacts after the build completes.

## GitHub Actions CI/CD Workflow

Azure automatically generates a workflow file at `.github/workflows/azure-static-web-apps-<name>.yml` when you connect the repository. This workflow triggers on every push to the main branch and handles the entire deployment pipeline.

The workflow configuration specifies the exact paths and build parameters:

```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
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
      - name: Build And Deploy
        id: builddeploy
        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"      # folder containing the Vue code

          api_location: ""                  # no API in this project

          output_location: "dist"           # generated by `npm run build`

```

The `app_location` parameter targets `etc/quiz-app` while `output_location` references the `dist` folder created by the Vue CLI build process.

## Local Testing Before Deployment

Validate the application locally to ensure the build succeeds before pushing to GitHub. Navigate to the project directory and execute the standard Vue CLI commands:

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

npm run build        # creates etc/quiz-app/dist

npm run serve        # optional: preview locally on http://localhost:8080

```

Successful local execution of `npm run build` confirms that the `dist` directory generates correctly, which is the same output Azure Static Web Apps will serve in production.

## Key Source Files and Architecture

The deployment architecture follows this flow: GitHub repository → GitHub Actions workflow → Azure Static Web Apps service → Public URL.

Critical files in the `microsoft/AI-For-Beginners` repository include:

- **[`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md)**: Contains project overview and npm command documentation
- **[`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js)**: The Vue application entry point that bootstraps the app
- **[`etc/quiz-app/src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue)**: Main component handling layout and language selection
- **[`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json)**: Defines build scripts used by the Azure workflow
- **`.github/workflows/azure-static-web-apps-*.yml`**: Auto-generated CI/CD pipeline configuration

All static assets serve from Azure's edge network, providing global low-latency access to the quiz application at the assigned URL (e.g., `https://<app-name>.azurestaticapps.net`).

## Summary

- The Vue.js quiz app resides in `etc/quiz-app` and uses Vue CLI service commands defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json)
- **Azure Static Web Apps** deploys the contents of the `dist` folder generated by `npm run build`
- Configure the deployment with **App location** set to `etc/quiz-app` and **Output location** set to `dist`
- The auto-generated **GitHub Actions workflow** automates builds on every push to the main branch
- Local testing requires running `npm install` and `npm run build` within the `etc/quiz-app` directory

## Frequently Asked Questions

### What build command does Azure Static Web Apps use for the Vue quiz app?

Azure Static Web Apps automatically detects the Vue framework preset and executes `npm run build` (which invokes `vue-cli-service build` as defined in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json)). This command generates the production bundle in the `dist` folder that Azure then deploys to its edge network.

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

While the automated workflow is the standard approach, you can manually deploy using the Azure Static Web Apps CLI (`swa-cli`). However, the repository structure in `microsoft/AI-For-Beginners` is optimized for the GitHub Actions integration that Azure sets up automatically when you create the Static Web Apps resource.

### Why does the deployment require both `app_location` and `output_location`?

The `app_location` parameter (`etc/quiz-app`) tells the build agent where to find the [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) and source code to run `npm install` and `npm build`. The `output_location` (`dist`) specifies which folder contains the final static files (HTML, CSS, JS) that should be served to visitors, separating the source from the compiled output.

### Does the quiz app require any server-side APIs to function?

No. The quiz application in `etc/quiz-app` is a purely static Vue.js application with no backend dependencies. The `api_location` parameter in the workflow remains empty, and all quiz data and logic run client-side in the browser.