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

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	Defines npm scripts, Vue runtime dependencies (vue, vue-router, vue-i18n), and dev tools (@vue/cli-service)
etc/quiz-app/src/main.js	Application entry point that creates the Vue instance and registers plugins
etc/quiz-app/src/router/index.js	Configures client-side routing with fallback to NotFound.vue
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	Babel preset configuration for transpilation
etc/quiz-app/README.md	Documents available npm scripts (serve, build, lint)

Prerequisites: Installing Dependencies

Before building, install all required packages. The package.json specifies Vue 2.6.x along with @vue/cli-service as the build orchestrator.

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:

npm run build

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

1. Transpilation – 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 – 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:

npx serve -s dist

Navigate to http://localhost:5000 and test that:

• Route navigation functions properly (configured in 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:

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

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. 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 and set publicPath to match your deployment URL structure. Also verify that 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 where vue-i18n is configured. The language selector in src/App.vue automatically detects available locales.

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