Development Commands for the Microsoft AI-For-Beginners Quiz App

The quiz app in etc/quiz-app uses standard Vue CLI npm scripts: npm install to set up dependencies, npm run serve for local development, npm run build for production, and npm run lint for code quality.

The quiz application bundled with the microsoft/AI-For-Beginners curriculum is a Vue 2.x project that provides interactive assessments for learners. Understanding the core development commands lets contributors quickly spin up a local environment, iterate on quiz content, and deploy production-ready builds.

---

Install Dependencies with npm

Before running any other development commands, you must install the project's Node.js dependencies.

Navigate to the quiz app directory and run:

cd etc/quiz-app
npm install

This command reads package.json in etc/quiz-app/package.json and downloads all required packages into the node_modules/ folder. You only need to run this once after cloning the repository or when dependencies change.

---

Start the Development Server

The primary command for local development is npm run serve.

npm run serve

This launches a hot-reloading development server at http://localhost:8080 (or the next available port). Changes to Vue components, JavaScript files, or assets trigger automatic browser refreshes without manual restarts.

Under the hood, this script invokes vue-cli-service serve as defined in the package.json scripts section. The Vue CLI handles webpack compilation, dev-server configuration, and source maps automatically.

---

Build for Production

When you're ready to deploy, use npm run build:

npm run build

This command generates an optimized production bundle in the dist/ directory. The output includes:

• Minified JavaScript and CSS
• Hashed filenames for cache busting
• Static assets ready for any hosting platform

The production build is compatible with Azure Static Web Apps, GitHub Pages, or any static file server. As noted in the README, the artifacts in dist/ are deployment-ready immediately after building.

---

Lint and Fix Code Issues

Maintain code quality with npm run lint:

npm run lint

This runs ESLint with Vue-specific rules to catch syntax errors, style violations, and potential bugs. The command automatically fixes issues where possible and reports any remaining problems that require manual intervention.

The linting configuration extends standard Vue recommendations and helps ensure consistency across contributions to the AI-For-Beginners quiz app.

---

Run Commands Directly with Vue CLI

If you prefer bypassing npm scripts, you can invoke the Vue CLI service directly using npx:

# Development server

npx vue-cli-service serve

# Production build

npx vue-cli-service build

# Linting

npx vue-cli-service lint

These produce identical results to their npm run counterparts and are useful in CI/CD pipelines or when debugging toolchain behavior.

---

Key Files Supporting Development

File	Purpose
etc/quiz-app/package.json	Declares dependencies and npm scripts for all development commands
etc/quiz-app/src/main.js	Entry point that bootstraps the Vue application
etc/quiz-app/src/router/index.js	Configures client-side routing for quiz pages
etc/quiz-app/README.md	Authoritative documentation for the development workflow

---

Summary

• npm install — One-time setup for all dependencies listed in package.json
• npm run serve — Live development server with hot-reload at localhost:8080
• npm run build — Production bundle output to dist/ folder
• npm run lint — Automated ESLint checking and fixing
• All commands are standard Vue CLI workflows defined in etc/quiz-app/package.json

---

Frequently Asked Questions

What Node.js version is required for the quiz app?

The project targets Vue 2.x, which generally requires Node.js 10.x or higher. For optimal compatibility with the Vue CLI toolchain used in microsoft/AI-For-Beginners, Node.js 14.x or 16.x LTS versions are recommended.

Can I use yarn instead of npm for development commands?

Yes. The quiz app supports Yarn as an alternative package manager. Substitute npm install with yarn, and replace npm run <command> with yarn <command> for equivalent functionality.

Where does the quiz data come from?

The application loads quiz content from JSON files located within the repository's lesson structure. The router configuration in src/router/index.js and data loading logic handle dynamic quiz generation based on the curriculum structure.

How do I deploy the built quiz app to Azure?

Run npm run build to generate the dist/ folder, then deploy that folder using Azure Static Web Apps, Azure Storage with static website hosting, or Azure App Service. The static output requires no server-side runtime.

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