# How to Build the Vue.js Quiz Application for Production: A Complete Guide

> Learn how to build your Vue.js quiz application for production with this complete guide. Optimize and deploy your app efficiently using npm run build.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-21

---

**Run `npm run build` inside the `etc/quiz-app` directory to generate an optimized production bundle in the `dist/` folder, ready for deployment to any static hosting platform.**

The quiz application in Microsoft's AI-For-Beginners repository is a Vue 2 single-page application that helps learners test their knowledge of AI concepts. Understanding how to build this Vue.js quiz application for production ensures you can deploy it reliably to platforms like Azure Static Web Apps, Netlify, or GitHub Pages. This guide walks through the complete build process based on the actual source code structure.

## Project Structure and Key Files

The quiz application lives in `etc/quiz-app/` and follows standard Vue-CLI conventions. Here are the files that control the build process:

| File | Purpose |
|------|---------|
| [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) | Defines npm scripts, Vue runtime dependencies (`vue`, `vue-router`, `vue-i18n`), and dev tools (`@vue/cli-service`) |
| [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js) | Application entry point that creates the Vue instance and registers plugins |
| [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) | Configures client-side routing with fallback to [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue) |
| [`etc/quiz-app/src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/App.vue) | Root component containing the language selector and `<router-view/>` |
| `etc/quiz-app/src/assets/translations/` | JSON localization files loaded by `vue-i18n` |
| [`etc/quiz-app/babel.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/babel.config.js) | Babel preset configuration for transpilation |
| [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) | Documents available npm scripts (`serve`, `build`, `lint`) |

## Prerequisites: Installing Dependencies

Before building, install all required packages. The [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) specifies Vue 2.6.x along with `@vue/cli-service` as the build orchestrator.

```bash
cd etc/quiz-app
npm install

```

This creates a `node_modules/` directory with Webpack, Babel, and all plugins needed for the production build pipeline.

## Building the Vue.js Quiz Application for Production

The production build is triggered by a single npm script defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json):

```bash
npm run build

```

This command invokes `vue-cli-service build`, which performs three critical optimizations:

1. **Transpilation** – [`babel.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/babel.config.js) applies the `@vue/cli-plugin-babel/preset` to convert modern JavaScript for browser compatibility
2. **Bundling and tree-shaking** – Webpack consolidates all JavaScript, CSS, and assets while eliminating dead code
3. **Minification and hashing** – Output files receive content hashes for cache busting (`app.<hash>.js`, `chunk-vendors.<hash>.js`)

The resulting `dist/` folder contains:

- [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) – The entry HTML file with injected asset references
- `js/` – Minified JavaScript chunks split by route and vendor code
- `css/` – Extracted and minified stylesheets
- `assets/translations/` – Copied localization JSON files

## Verifying the Production Build Locally

Before deploying, serve the `dist/` folder locally to confirm the optimized bundle works correctly:

```bash
npx serve -s dist

```

Navigate to `http://localhost:5000` and test that:
- Route navigation functions properly (configured in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js))
- Language switching works (via `vue-i18n` loading files from `src/assets/translations/`)
- The 404 fallback page appears for unknown routes

## Deploying to Azure Static Web Apps

The repository includes documentation for automated deployment via GitHub Actions. The workflow builds the Vue.js quiz application for production and publishes to Azure:

```yaml
- 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"
    output_location: "dist"

```

Key configuration values:
- `app_location`: Points to `etc/quiz-app` where [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) resides
- `output_location`: Matches the Vue-CLI default `dist/` folder
- The action automatically runs `npm run build` before deployment

## Customizing the Build Configuration

If you need to modify the build behavior, create or edit [`etc/quiz-app/vue.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/vue.config.js). Common adjustments include:

- Changing the output directory name
- Configuring public path for subdirectory hosting
- Enabling source maps for debugging

Without this file, Vue-CLI uses sensible defaults optimized for most deployment scenarios.

## Summary

Building the Vue.js quiz application for production follows standard Vue-CLI patterns:

- Install dependencies with `npm install` in the `etc/quiz-app` directory
- Run `npm run build` to generate optimized static files in `dist/`
- Serve `dist/` locally with `npx serve -s dist` for verification
- Deploy `dist/` to any static host, or use the provided Azure Static Web Apps workflow for CI/CD
- Key dependencies include `vue`, `vue-router`, `vue-i18n`, and `@vue/cli-service` as defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json)

## Frequently Asked Questions

### What version of Vue does the quiz application use?

The quiz application uses **Vue 2.6.x** as specified in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json). The project relies on `@vue/cli-service` for building, which provides Webpack-based tooling optimized for Vue 2 single-file components.

### Can I deploy the quiz app to hosts other than Azure?

Yes. The `dist/` folder produced by `npm run build` contains standard static files compatible with any hosting platform including **Netlify**, **Vercel**, **GitHub Pages**, or traditional web servers like Nginx or Apache. No server-side runtime is required.

### Why does my production build show a blank page?

This typically indicates an incorrect **public path** configuration. If hosting in a subdirectory, create [`etc/quiz-app/vue.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/vue.config.js) and set `publicPath` to match your deployment URL structure. Also verify that [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) uses `history` mode appropriately for your hosting environment.

### How do I add new languages to the quiz?

Place additional JSON translation files in `etc/quiz-app/src/assets/translations/`, then register the new locale in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) where `vue-i18n` is configured. The language selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) automatically detects available locales.