Running and building a Vue app - Step-by-Step Execution

Concept Flow - Running and building a Vue app

Start Vue Project Setup

↓

Install dependencies

↓

Run development server

↓

Make code changes

↓

Hot reload updates in browser

↓

Prepare for production

↓

Build optimized app

↓

Deploy built files

↓

End

This flow shows the steps from setting up a Vue app, running it for development with live updates, to building it for production deployment.

Execution Sample

Vue

npm install
npm run dev
# Make changes in src/App.vue
npm run build

Commands to install dependencies, run the Vue app in development mode with live reload, and build the app for production.

Execution Table

Step	Action	Command/Process	Result/Output
1	Install dependencies	npm install	node_modules folder created with packages
2	Start dev server	npm run dev	Local server starts, app accessible at localhost:5173
3	Edit source code	Modify src/App.vue	Dev server detects change, triggers hot reload
4	Hot reload	Dev server updates browser	Browser refreshes component with new code instantly
5	Build for production	npm run build	dist folder created with optimized files
6	Deploy	Upload dist contents	App ready to serve on production server

💡 Process ends after build and deployment preparation

Variable Tracker

Variable	Start	After npm install	After npm run dev	After code change	After build
node_modules	empty	populated	populated	populated	populated
dev server	off	running	running	running	off
dist folder	none	none	none	none	created

Key Moments - 3 Insights

Why does the browser update immediately after changing src/App.vue?

Because the dev server watches source files and triggers hot reload, as shown in step 4 of the execution_table.

What is the difference between 'npm run dev' and 'npm run build'?

'npm run dev' starts a live development server with hot reload (step 2), while 'npm run build' creates optimized files for production in the dist folder (step 5).

Why do we need to run 'npm install' before starting the dev server?

Because 'npm install' downloads all required packages into node_modules, which the dev server needs to run properly (step 1).

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A The dev server starts running

B Source code is edited triggering hot reload

C Dependencies are installed

D The app is built for production

💡 Hint

Check the 'Action' and 'Result/Output' columns at step 3 in the execution_table

According to variable_tracker, when is the dist folder created?

A After build

B After npm run dev

C After code change

D After npm install

💡 Hint

Look at the 'dist folder' row and see when it changes from 'none' to 'created'

If you skip 'npm install', what will likely happen when running 'npm run dev'?

A Dev server runs normally

B Build files are created

C Dev server fails due to missing dependencies

D Hot reload triggers immediately

💡 Hint

Refer to step 1 and 2 in execution_table and variable_tracker about node_modules presence

Concept Snapshot

Running and building a Vue app:
1. Run 'npm install' to get dependencies.
2. Use 'npm run dev' to start a live dev server with hot reload.
3. Edit source files to see instant updates in browser.
4. Run 'npm run build' to create optimized production files.
5. Deploy the 'dist' folder contents to your server.

Full Transcript

This visual execution shows how to run and build a Vue app step-by-step. First, you install dependencies with 'npm install', which creates the node_modules folder. Then, you start the development server using 'npm run dev', which runs a local server and opens the app in your browser. When you edit source files like src/App.vue, the dev server detects changes and triggers hot reload, updating the browser instantly without a full refresh. After development, you run 'npm run build' to create an optimized 'dist' folder with production-ready files. Finally, you deploy these files to your server to make the app live. The variable tracker shows how node_modules, the dev server state, and the dist folder change during these steps. Key moments clarify why hot reload works, the difference between dev and build commands, and the importance of installing dependencies first. The quiz tests understanding of these steps and their effects.

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