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

> Migrate the Quiz-App to any static host with this guide. Learn to build, configure base URL, and add SPA routing for a smooth deployment.

- Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tags: migration-guide
- Published: 2026-02-27

---

**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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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:

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

```

This creates the `dist/` directory with all static files, as defined in [`quiz-app/package.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js) to read from an environment variable:

```js
// 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:

```bash
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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/index.html)).

## Deployment Configuration Examples

### Deploying to Netlify

Create a [`netlify.toml`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/netlify.toml) file in the `quiz-app` directory:

```toml
[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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vercel.json) file:

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

```

### Deploying to GitHub Pages

Add a GitHub Actions workflow file at [`.github/workflows/gh-pages.yml`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/.github/workflows/gh-pages.yml):

```yaml
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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/package.json) | Defines Vite build scripts (`dev`, `build`, `preview`) | [`quiz-app/package.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/package.json) |
| [`vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vite.config.js) | Configures base URL and Vue plugin | [`quiz-app/vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/vite.config.js) |
| [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) | Uses `import.meta.env.BASE_URL` for dynamic routing | [`quiz-app/src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/router/index.js) |
| [`README.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/README.md) | Contains Azure Static Web Apps deployment steps | [`quiz-app/README.md`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vite.config.js) if using a sub-path, and add provider-specific SPA routing rules.
- Key configuration files include [`netlify.toml`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/netlify.toml) for Netlify, [`vercel.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vercel.json) for Vercel, and GitHub Actions workflows for GitHub Pages.
- The router at [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/vite.config.js) to use `process.env.VITE_BASE_URL` as the base path. The Vue router in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/netlify.toml) file to configure the build command and SPA redirects. The existing [`package.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/package.json) scripts and [`vite.config.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`.