How to Build the AI for Beginners Quiz App for Production

To build the AI for Beginners quiz app for production, install Node dependencies in the etc/quiz-app directory, execute npm run build to compile optimized static assets into the dist folder, and deploy the resulting files to Azure Static Web Apps or any static-file hosting platform.

The AI for Beginners quiz app is a lightweight Vue 2 single-page application maintained by Microsoft in the etc/quiz-app folder of the AI-For-Beginners repository. Because the build process outputs pure static HTML, CSS, and JavaScript, you can host the production build on any CDN or static site service without requiring a backend server.

Prerequisites and Project Structure

Before building, ensure you have Node.js and npm installed. The application resides entirely within etc/quiz-app and follows a standard Vue CLI project layout.

Key files in the source tree include:

• src/main.js – Bootstraps the Vue instance and installs the router and internationalization plugins.
• src/router/index.js – Defines routes for Home, Quiz, and 404 pages using Vue Router.
• src/components/Quiz.vue – Core component responsible for rendering quiz questions.
• src/assets/translations/ – JSON files containing localized quiz content.
• package.json – Defines the build script and Vue dependencies (vue@^2.6.11, vue-router@^3.4.9, vue-i18n@^8.28.2).

Local Build Process

To generate production-ready assets locally, navigate to the quiz app directory and run the Vue CLI build command.

cd etc/quiz-app
npm install
npm run build

The build script in package.json invokes vue-cli-service build, which transpiles ES6 code, bundles components, and minifies the output. This process creates a dist directory containing the optimized index.html entry point and hashed static assets ready for deployment.

Production Deployment Options

Since the output consists of static files, you can deploy the dist folder to any service that hosts static content.

Azure Static Web Apps (Recommended)

The official documentation recommends Azure Static Web Apps for automated CI/CD. When configuring the service:

1. Set the App Location to etc/quiz-app.
2. Set the Output Location to dist.
3. Skip the API location unless you are adding serverless functions.

Azure automatically generates a GitHub Actions workflow (.github/workflows/azure-static-web-apps-*.yml) that uses the Azure/static-web-apps-deploy@v1 action. On every push to your main branch, the workflow builds the application and publishes the dist folder using the token stored in AZURE_STATIC_WEB_APPS_API_TOKEN.

git add -A
git commit -m "Release quiz app"
git push origin main

Alternative Static Hosts

You can manually upload the dist directory to GitHub Pages, Netlify, or AWS S3. Because Vue Router uses history mode, ensure your host is configured to serve index.html for all routes, or the application will return 404 errors on direct navigation to quiz URLs.

Architecture and Key Components

Understanding the stack helps when debugging build issues or extending functionality.

Layer	Technology	Role
UI Framework	Vue 2 (vue@^2.6.11)	Renders reactive components and manages state.
Routing	Vue Router (vue-router@^3.4.9)	Handles client-side navigation defined in src/router/index.js.
Internationalization	vue-i18n (vue-i18n@^8.28.2)	Loads translations from src/assets/translations/ and switches locales dynamically.
Build System	Vue CLI (@vue/cli-service)	Compiles source code into the production dist bundle.

The entry point at src/main.js mounts the root App.vue component and initializes both the router and i18n plugin. Quiz data flows from JSON files (e.g., src/assets/translations/en/lesson-1.json) into the Quiz.vue component, which renders questions and handles user interaction.

Customizing Content and Localization

To add a new language, create a folder under src/assets/translations/ and import the JSON modules.

For example, adding French support requires creating src/assets/translations/fr/index.js:

import lesson1 from './lesson-1.json'
import lesson2 from './lesson-2.json'

export default {
  lesson1,
  lesson2
}

Then update the language selector in src/App.vue to include the new locale:

<option value="fr">Français</option>

Users can navigate to localized quizzes programmatically via:

this.$router.push({ path: '/quiz', query: { loc: 'fr' } })

Summary

• The quiz app is a Vue 2 SPA located in etc/quiz-app that compiles to static files.
• Run npm install and npm run build to generate the production dist directory.
• Deploy the dist folder to Azure Static Web Apps by setting the app location to etc/quiz-app and output location to dist.
• The build relies on Vue CLI and outputs minified assets suitable for any static host.
• Content is data-driven via JSON files in src/assets/translations/, supporting easy localization through vue-i18n.

Frequently Asked Questions

What Node.js version is required to build the quiz app?

The project uses Vue CLI 4.x and Vue 2, which are compatible with Node.js 12.x or higher. However, using the Active LTS version (Node.js 18.x or 20.x) ensures compatibility with modern npm packages while maintaining support for the legacy Vue 2 build pipeline.

Can I deploy the quiz app to GitHub Pages instead of Azure?

Yes. Because npm run build produces a static dist folder, you can deploy to GitHub Pages by pushing the contents of dist to a gh-pages branch or using the peaceiris/actions-gh-pages GitHub Action. Ensure you configure the publicPath in vue.config.js if your repository is not at the root of your GitHub Pages domain.

Where is the quiz question data stored?

All quiz content resides in JSON files under src/assets/translations/. Each language folder (e.g., en/, fr/) contains lesson-specific files like lesson-1.json that the Quiz.vue component loads based on the current route and locale query parameter.

How do I update the quiz content without rebuilding the entire curriculum?

Edit the specific JSON files in src/assets/translations/ and redeploy. Since the quiz app is statically generated, any content changes require a new build and deployment to update the hosted files. If you need dynamic content updates without redeployment, you would need to refactor Quiz.vue to fetch JSON from an external API at runtime.

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