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

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, 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, the build script uses vue-cli-service build to create production-ready files.

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

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:

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: Contains project overview and npm command documentation
• etc/quiz-app/src/main.js: The Vue application entry point that bootstraps the app
• etc/quiz-app/src/App.vue: Main component handling layout and language selection
• 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
• 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). 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 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.

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