How to Migrate the Quiz-App to a Different Deployment Target: A Complete Guide

The Quiz-App from Microsoft's Web-Dev-For-Beginners repository is a static Vue 3 + Vite application that can be deployed to any static hosting provider by building the dist folder, configuring the base URL, and adding provider-specific SPA routing rules.

The Quiz-App in the microsoft/Web-Dev-For-Beginners repository is designed as a framework-agnostic, static single-page application. While it ships with Azure Static Web Apps configuration, its Vue 3 + Vite architecture makes it trivial to migrate the quiz-app to a different deployment target such as Netlify, Vercel, GitHub Pages, or AWS S3.

Understanding the Quiz-App Architecture

The Quiz-App is a purely static Vue 3 application built with Vite. According to quiz-app/package.json, the build script (npm run build) compiles the application into a dist folder containing only static assets—HTML, CSS, JavaScript, and image files. This output is framework-agnostic and can be served by any static hosting service without server-side rendering requirements.

Prerequisites for Migration

Before migrating, ensure you have:

• Node.js 20+ installed
• The repository cloned locally
• Dependencies installed via npm install

Step-by-Step Migration Guide

Step 1: Build the Static Assets

Run the Vite build command to generate the dist folder:

cd quiz-app
npm install
npm run build

This creates the dist/ directory with all static files, as defined in quiz-app/package.json.

Step 2: Configure the Base URL in Vite

If your deployment target serves the app from a sub-path (e.g., https://example.com/quiz-app/), you must configure Vite's base option. Edit quiz-app/vite.config.js to read from an environment variable:

// quiz-app/vite.config.js
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  base: process.env.VITE_BASE_URL || '/',   // Configurable base URL
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

Now you can build for sub-paths using:

VITE_BASE_URL=/quiz-app/ npm run build

Step 3: Configure the Target Provider

Each hosting provider requires specific configuration to serve the dist folder and handle SPA routing (fallback to index.html).

Deployment Configuration Examples

Deploying to Netlify

Create a netlify.toml file in the quiz-app directory:

[build]
  publish = "dist"
  command = "npm run build"

[context.production.environment]
  VITE_BASE_URL = "/"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Deploying to Vercel

Create a vercel.json file:

{
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Deploying to GitHub Pages

Add a GitHub Actions workflow file at .github/workflows/gh-pages.yml:

name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
        env:
          VITE_BASE_URL: "/quiz-app/"
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Key Files Reference

File	Role	Location
package.json	Defines Vite build scripts (dev, build, preview)	quiz-app/package.json
vite.config.js	Configures base URL and Vue plugin	quiz-app/vite.config.js
src/router/index.js	Uses import.meta.env.BASE_URL for dynamic routing	quiz-app/src/router/index.js
README.md	Contains Azure Static Web Apps deployment steps	quiz-app/README.md

Summary

• The Quiz-App is a static Vue 3 + Vite application that builds to a dist folder, making it portable to any static host.
• To migrate the quiz-app to a different deployment target, run npm run build, configure the base URL in vite.config.js if using a sub-path, and add provider-specific SPA routing rules.
• Key configuration files include netlify.toml for Netlify, vercel.json for Vercel, and GitHub Actions workflows for GitHub Pages.
• The router at src/router/index.js automatically respects the BASE_URL environment variable, ensuring client-side routing works correctly on any host.

Frequently Asked Questions

Can I deploy the Quiz-App to a subdirectory of my domain?

Yes. Set the VITE_BASE_URL environment variable when building (e.g., VITE_BASE_URL=/quiz-app/ npm run build) and update vite.config.js to use process.env.VITE_BASE_URL as the base path. The Vue router in src/router/index.js uses import.meta.env.BASE_URL to handle sub-paths automatically.

Do I need to modify the source code to migrate from Azure Static Web Apps to Netlify?

No. The Quiz-App is framework-agnostic and static. You only need to add a netlify.toml file to configure the build command and SPA redirects. The existing package.json scripts and vite.config.js work without modification.

How do I handle client-side routing when deploying to GitHub Pages?

GitHub Pages requires a 404 fallback to index.html for SPAs. Use the peaceiris/actions-gh-pages action to deploy the dist folder, and ensure you set the correct VITE_BASE_URL (e.g., /Web-Dev-For-Beginners/). The router will handle the rest.

What Node.js version is required to build the Quiz-App?

The package.json specifies Node.js 20+ for optimal compatibility with Vite and Vue 3. Ensure your deployment environment uses Node 20 or higher when running npm run build.

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