Running and building a Vue app - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run npm run serve in a Vue 3 app?

You have a Vue 3 project created with Vite. You run npm run serve. What is the expected behavior?

A Starts a local development server with hot module replacement for live updates.

B Builds the app into static files for production deployment.

C Runs unit tests defined in the project.

D Installs project dependencies before starting the app.

💡 Hint

Think about what a development server does compared to building for production.

npm run serve starts a local dev server that updates the app live as you change code. Building for production uses npm run build.

📝 Syntax

intermediate

Which command correctly builds a Vue 3 app for production using Vite?

You want to create optimized static files for deployment from your Vue 3 project using Vite. Which command do you run?

A npm run start

B npm run serve

C npm run build

D npm run dev

💡 Hint

Building means preparing files for production, not running a server.

npm run build runs Vite's build process to create optimized static files. npm run serve runs a dev server.

🔧 Debug

advanced

Why does npm run serve fail with 'command not found' in a Vue 3 project?

You cloned a Vue 3 project and ran npm run serve, but get command not found. What is the most likely cause?

A You need to run <code>vue serve</code> instead of <code>npm run serve</code>.

B The <code>serve</code> script is missing in <code>package.json</code> scripts section.

C You forgot to install dependencies with <code>npm install</code>.

D The Node.js version is too old to run Vue commands.

💡 Hint

Check the package.json file for scripts.

If serve is not defined in package.json scripts, npm run serve will fail. You must add it or use the correct script name.

❓ state_output

advanced

What is the output folder after running npm run build in a Vue 3 Vite project?

After running npm run build in a Vue 3 project using Vite, which folder contains the production-ready files?

A src

B build

C public

D dist

💡 Hint

Look for the default output folder Vite uses.

Vite outputs production files to the dist folder by default after building.

🧠 Conceptual

expert

Why is it important to use npm run build before deploying a Vue 3 app?

Explain why running npm run build is necessary before deploying a Vue 3 app to a web server.

A It compiles and optimizes the app into static files that load faster and work without a dev server.

B It installs all dependencies needed for the app to run on the server.

C It starts a local server so you can test the app before deployment.

D It converts Vue files into plain HTML files without JavaScript.

💡 Hint

Think about what production-ready files need to be like.

npm run build creates optimized static files that browsers can load directly. This is essential for fast, reliable deployment without needing a development environment.

Practice

1. Which command do you use to start your Vue app locally during development?

easy

A. npm run preview

B. npm run build

C. npm run dev

D. npm start

Solution

1. Step 1: Understand the purpose of each command

   npm run dev is used to run the app locally for development, npm run build creates production files, and npm run preview previews the production build.

2. Step 2: Match the command to running locally

   Since running locally during development means seeing live changes, npm run dev is the correct command.

3. Final Answer:

   npm run dev -> Option C

4. Quick Check:

   Run locally = npm run dev [OK]

Hint: Run locally during development with npm run dev [OK]

Common Mistakes:

• Confusing build with dev command
• Using npm start instead of npm run dev
• Trying to preview before building

2. Which of the following is the correct command to create optimized production files for a Vue app?

easy

A. npm run dev

B. npm run build

C. npm run start

D. npm run preview

Solution

1. Step 1: Identify the command for production build

   npm run build is the standard command to create optimized files for production in Vue apps.

2. Step 2: Eliminate other options

   npm run dev runs the app locally, npm run preview previews the build, and npm run start is not a default Vue command.

3. Final Answer:

   npm run build -> Option B

4. Quick Check:

   Build production = npm run build [OK]

Hint: Build production files with npm run build [OK]

Common Mistakes:

• Using npm run dev to build
• Typing npm run start which is not default
• Confusing preview with build

3. What will happen if you run npm run preview after building your Vue app?

medium

A. It starts a local server to preview the production build

B. It rebuilds the app for development

C. It deletes the build folder

D. It runs the app in development mode

Solution

1. Step 1: Understand the purpose of npm run preview

   This command serves the production build locally so you can check how the optimized app works before sharing.

2. Step 2: Compare with other options

   It does not rebuild or delete files, nor does it run development mode. It only previews the built app.

3. Final Answer:

   It starts a local server to preview the production build -> Option A

4. Quick Check:

   Preview = local server for production build [OK]

Hint: Preview runs a local server for the built app [OK]

Common Mistakes:

• Thinking preview rebuilds the app
• Confusing preview with dev mode
• Assuming preview deletes files

4. You ran npm run build but your dist folder is empty. What is the most likely cause?

medium

A. You forgot to install dependencies with npm install

B. You ran npm run dev instead of build

C. You ran npm run preview before building

D. Your package.json has no build script defined

Solution

1. Step 1: Check if build script exists

   If npm run build runs but produces no files, likely the build script is missing or misconfigured in package.json.

2. Step 2: Rule out other causes

   Missing dependencies cause errors, not empty folders. Running dev or preview does not create build files. So missing build script is the main cause.

3. Final Answer:

   Your package.json has no build script defined -> Option D

4. Quick Check:

   Empty build folder = missing build script [OK]

Hint: Check package.json for build script if dist is empty [OK]

Common Mistakes:

• Assuming npm install fixes empty dist
• Confusing dev and build commands
• Trying preview before building

5. You want to share your Vue app with a friend but first want to check the production version locally. Which sequence of commands should you run?

hard

A. npm run build, then npm run preview

B. npm run dev, then npm run preview

C. npm run preview, then npm run build

D. npm run build, then npm run dev

Solution

1. Step 1: Build the production files first

   You must run npm run build to create optimized files for production.

2. Step 2: Preview the production build locally

   After building, run npm run preview to start a local server and check the production version before sharing.

3. Final Answer:

   npm run build, then npm run preview -> Option A

4. Quick Check:

   Build then preview to check production [OK]

Hint: Build first, then preview to check production locally [OK]

Common Mistakes:

• Previewing before building
• Running dev instead of preview for production check
• Running preview then build in wrong order