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

> Deploy your Vue.js quiz app to Azure Static Web Apps. Follow this guide to build the app, configure Azure, and automate CI/CD with GitHub Actions for the microsoft/AI-For-Beginners repository.

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

---

**Deploy the Vue.js quiz application from `microsoft/AI-For-Beginners` by building the app in `etc/quiz-app`, configuring Azure Static Web Apps to target that folder, and letting the auto-generated GitHub Actions workflow handle CI/CD.**

The `microsoft/AI-For-Beginners` repository includes a Vue 2 quiz application in the `etc/quiz-app` directory. Azure Static Web Apps (SWA) provides free, globally distributed hosting for static sites with built-in CI/CD through GitHub Actions. This guide walks through the exact deployment configuration used by the project.

---

## Prerequisites

Before deploying, ensure you have:

- An active Azure subscription
- A fork or clone of the `microsoft/AI-For-Beginners` repository on GitHub
- Node.js installed locally for testing (optional but recommended)

---

## Project Structure Overview

The quiz application follows a standard Vue CLI structure:

| Component | Path | Purpose |
|-----------|------|---------|
| Project root | `etc/quiz-app/` | Vue 2 application root |
| Entry point | [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js) | Bootstraps the Vue instance |
| Main component | [`etc/quiz-app/src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue) | Layout and language selector |
| Build scripts | [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) | npm scripts for build/serve |
| Build output | `etc/quiz-app/dist/` | Static files generated by `npm run build` |

Got from the raw source code above, I will preserve all file paths, function names, and code examples.

---

## Step 1: Build the Vue Application Locally

Test the build process before deploying to Azure. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) in `etc/quiz-app` defines the standard Vue CLI commands:

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

```

Run these commands to verify everything works:

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

```

This creates the `etc/quiz-app/dist/` folder containing optimized static assets. The `dist` folder is what Azure Static Web Apps will ultimately serve.

Optionally, preview locally:

```bash
npm run serve

# Serves on http://localhost:8080

```

---

## Step 2: Create the Azure Static Web Apps Resource

In the Azure portal, create a new Static Web App resource with these settings:

1. **Sign in** to the Azure portal and select **Create a resource** → **Static Web App**
2. **Link your GitHub repository** and authorize Azure to access the `microsoft/AI-For-Beginners` repo
3. **Configure build settings**:
   - **App location**: `etc/quiz-app`
   - **Output location**: `dist`
   - **Framework preset**: Vue (auto-detects build commands)

Azure automatically detects the Vue framework and populates the build preset. The **app location** points to where [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) lives; the **output location** matches the folder created by `npm run build`.

---

## Step 3: Review the Auto-Generated GitHub Actions Workflow

Azure creates a workflow file at `.github/workflows/azure-static-web-apps-<unique-name>.yml` in your repository. This file orchestrates CI/CD on every push to the configured branch.

Here is the complete workflow structure generated by Azure:

```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"
          api_location: ""
          output_location: "dist"

```

Key configuration values:

- `app_location: "etc/quiz-app"` — Tells the workflow where the Vue source code resides
- `output_location: "dist"` — Matches the Vue CLI default build output directory
- `api_location: ""` — Empty because this project has no serverless API functions

---

## Step 4: Verify Deployment and Access the Live URL

Once the workflow runs successfully, Azure provisions:

- A globally distributed CDN endpoint
- Free SSL certificate
- Custom domain support (optional)

The deployment produces a public URL in this format:

```

https://<app-name>-<random-id>.azurestaticapps.net

```

Find this URL in:

- The Azure portal (Static Web App → Overview → URL)
- The GitHub Actions workflow logs under the `Build And Deploy` step

---

## Architecture Overview

The complete deployment flow works as follows:

```

GitHub repository
       ↓
GitHub Actions workflow (triggered on push to main)
       ↓
npm install + npm run build (in etc/quiz-app)
       ↓
dist/ folder generated
       ↓
Azure/static-web-apps-deploy@v1
       ↓
Azure Static Web Apps edge network
       ↓
Public HTTPS endpoint

```

All static assets—HTML, CSS, JavaScript, and images—are served from Azure's global edge nodes. No server infrastructure is required.

---

## Troubleshooting Common Issues

### Build failures in GitHub Actions

Check that [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) contains valid dependencies. The workflow runs `npm install` automatically, but lockfile conflicts can occur.

### 404 errors on page refresh

Vue Router in history mode requires a [`staticwebapp.config.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/staticwebapp.config.json) file in `etc/quiz-app` if not already present:

```json
{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

```

### Output location mismatches

Ensure `output_location: "dist"` in the workflow matches the actual folder name in `etc/quiz-app/dist`. Older Vue CLI versions may use `dist/` with a trailing slash configuration difference.

---

## Summary

- The quiz app lives in `etc/quiz-app` and builds to `dist/` via standard Vue CLI commands
- Azure Static Web Apps requires `app_location` pointing to the Vue folder and `output_location` set to `dist`
- The auto-generated GitHub Actions workflow at `.github/workflows/azure-static-web-apps-*.yml` handles all CI/CD
- No manual file uploads needed—push to `main` triggers automatic build and global deployment

---

## Frequently Asked Questions

### Does Azure Static Web Apps support Vue 3 as well as Vue 2?

Yes. The configuration is identical regardless of Vue version. The `microsoft/AI-For-Beginners` repository uses Vue 2, but changing the framework preset to Vue in Azure portal works for Vue 3 projects too. The build command detection relies on [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) scripts, not the Vue version itself.

### Can I deploy without using GitHub Actions?

Yes, though CI/CD is recommended. Use the **Azure Static Web Apps CLI** (`swa`) to deploy manually:

```bash
npm install -g @azure/static-web-apps-cli
cd etc/quiz-app
swa build
swa deploy ./dist --env production

```

This bypasses GitHub Actions but requires managing the deployment token locally.

### What happens if I add API functions later?

Update the workflow's `api_location` parameter to point to your API folder (commonly `api/`). Azure Static Web Apps hosts serverless functions under the same domain as your static content, enabling seamless full-stack deployment without CORS configuration.

### Is the quiz app in `etc/quiz-app` the only deployable component?

No. The main `microsoft/AI-For-Beginners` repository contains educational notebooks and materials. The `etc/quiz-app` is an auxiliary tool. You could deploy other static sites from different folders using separate SWA resources with unique `app_location` values.