# How to Deploy the Vue.js Quiz App to Azure Static Web Apps with GitHub Actions

> Deploy your Vuejs quiz app to Azure Static Web Apps using GitHub Actions. Follow this guide to automate your deployment from the AI-For-Beginners repo. Get started today!

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: getting-started
- Published: 2026-08-27

---

**TLDR:** You can deploy the Vue 2.x quiz application from the `microsoft/AI-For-Beginners` repository to Azure Static Web Apps by configuring the resource in the Azure portal, which automatically generates a GitHub Actions workflow in `.github/workflows/azure-static-web-apps-<app-name>.yml` that builds the project from the `etc/quiz-app` directory and deploys the `dist` output folder on every push to the `main` branch.

The **quiz-app** is a Vue 2.x single-page application located under `etc/quiz-app` in the `microsoft/AI-For-Beginners` educational repository. According to [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) lines 55-56, deploying to Azure Static Web Apps requires creating an Azure resource that automatically provisions a continuous deployment pipeline using repository secrets and GitHub Actions.

## Prerequisites and Repository Structure

Before deploying, ensure you have an active **Azure account** and have pushed the `microsoft/AI-For-Beginners` repository to your GitHub account. The application source code resides in `etc/quiz-app`, with these critical components:

- [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) — Defines Vue 2.x dependencies and the `build` script that outputs to `./dist`
- `etc/quiz-app/src/` — Contains Vue components, router configuration, and views
- `etc/quiz-app/dist/` — Target directory for production static files generated by the build process

## Step 1: Create the Azure Static Web App Resource

To initiate deployment, create a new **Static Web App** resource in the Azure portal. During configuration:

1. Select the **microsoft/AI-For-Beginners** repository and the `main` branch as the deployment source
2. Choose **Vue** as the framework preset, or select **Custom** to manually configure build settings
3. Azure automatically provisions a resource and generates a workflow file at `.github/workflows/azure-static-web-apps-<app-name>.yml` upon the next push to the repository, as noted in [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) lines 84-85

## Step 2: Configure the GitHub Actions Workflow

The auto-generated workflow orchestrates the build and deployment process using the `Azure/static-web-apps-deploy@v1` action. The configuration must specify the subdirectory location and output folder for the Vue application.

```yaml
name: Azure Static Web Apps CI/CD

on:
  push:
    branches: [ main ]

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Set up Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: |
          cd etc/quiz-app
          npm ci

      - name: Build application
        run: |
          cd etc/quiz-app
          npm run build

      - name: Deploy to Azure
        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"
          output_location: "dist"

```

**Key configuration parameters:**

- **`app_location`** — Set to `etc/quiz-app` to point the builder to the Vue application root within the monorepo structure
- **`output_location`** — Set to `dist`, the directory containing the compiled static assets generated by `npm run build`
- **`azure_static_web_apps_api_token`** — Retrieved from repository secrets, this token is provisioned automatically by Azure during resource creation (see [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) lines 115-116)

## Step 3: Local Development and Build Verification

Before triggering the CI pipeline, verify the application builds correctly on your local machine:

```bash

# Navigate to the quiz application directory

cd etc/quiz-app

# Install dependencies

npm install

# Run development server at http://localhost:8080

npm run serve

# Create production build in ./dist

npm run build

```

The `npm run build` command executes the production build script defined in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json), emitting optimized static files to the `dist` directory. The GitHub Actions workflow subsequently deploys these files to Azure Static Web Apps.

## Step 4: Verify the Deployment

Once the workflow completes successfully, Azure Static Web Apps serves the application at a URL such as `https://<app-name>.azurestaticapps.net`. According to [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) lines 124-125, this endpoint hosts the compiled quiz application and handles client-side routing for the Vue SPA.

## Summary

Deploying the Vue.js quiz app to Azure Static Web Apps requires:
- Creating an Azure Static Web App resource linked to the `microsoft/AI-For-Beginners` repository
- Allowing Azure to generate a GitHub Actions workflow at `.github/workflows/azure-static-web-apps-<app-name>.yml`
- Configuring the workflow to execute `npm run build` in the `etc/quiz-app` directory and deploy the resulting `dist` folder
- Storing the `AZURE_STATIC_WEB_APPS_API_TOKEN` secret for authenticated deployments to the Azure service
- Verifying the live URL provided by Azure after the initial CI/CD run completes

## Frequently Asked Questions

### What Node.js version does the quiz app require?

The quiz application requires **Node.js 16**, as specified in the GitHub Actions workflow using `actions/setup-node@v2` with `node-version: '16'`. This ensures compatibility with the Vue 2.x build toolchain defined in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json).

### Can I deploy from a branch other than main?

Yes. While the default configuration targets the `main` branch, you can modify the `on.push.branches` array in `.github/workflows/azure-static-web-apps-<app-name>.yml` to include other branch names. You can also add `pull_request` triggers to generate preview deployments for testing changes before merging.

### Why does my deployment fail with 404 errors on page refresh?

Azure Static Web Apps automatically handles fallback routing for Vue SPAs when the output location is configured correctly. Ensure `output_location` points to the `dist` folder containing the [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) file, and verify that the GitHub Actions workflow successfully executes `npm run build` before the deployment step runs.

### How do I update the deployed application after making changes?

Simply commit your changes to the monitored branch (e.g., `main`) and push to GitHub. The GitHub Actions workflow triggers automatically, re-running `npm run build` in the `etc/quiz-app` directory and redeploying the updated `dist` contents to your Azure Static Web Apps endpoint without manual intervention.