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

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	Bootstraps the Vue instance
Main component	etc/quiz-app/src/App.vue	Layout and language selector
Build scripts	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 in etc/quiz-app defines the standard Vue CLI commands:

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

Run these commands to verify everything works:

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:

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

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 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 file in etc/quiz-app if not already present:

{
  "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 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:

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}