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

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 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 — 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 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.

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 lines 115-116)

Step 3: Local Development and Build Verification

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

# 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, 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 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.

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

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