Deployment to static hosting in Vue - Step-by-Step Execution

Concept Flow - Deployment to static hosting

Write Vue app code

↓

Run build command

↓

Generate static files

↓

Upload files to hosting

↓

Access app via URL

↓

Browser loads static files

↓

App runs in browser

This flow shows how Vue app code is built into static files, uploaded to hosting, and then served to users.

Execution Sample

Vue

npm run build
# generates dist/ folder
# upload dist/ contents to hosting
# open URL to see app

Build Vue app into static files and deploy to static hosting for users to access.

Execution Table

Step	Action	Input/Command	Output/Result
1	Write Vue app code	Vue files (.vue, .js, .css)	Source code ready
2	Run build command	npm run build	dist/ folder with static files
3	Generate static files	Vue source code	index.html, js, css files in dist/
4	Upload files to hosting	dist/ folder contents	Files available on hosting server
5	Access app via URL	Browser requests URL	Hosting serves static files
6	Browser loads static files	index.html, js, css	App runs in browser
7	App runs	Static assets loaded	User sees Vue app UI
8	Exit	All steps done	Deployment complete

💡 All static files uploaded and served, app accessible via URL

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
Vue app code	Written	Unchanged	Unchanged	Unchanged
dist/ folder	Not present	Created with static files	Uploaded to hosting	Served to users
Hosting server	Empty	Empty	Has static files	Serves files on request

Key Moments - 3 Insights

Why do we run 'npm run build' before uploading files?

Because 'npm run build' creates optimized static files in the dist/ folder needed for hosting, as shown in execution_table step 2 and 3.

Can we upload source Vue files directly to static hosting?

No, static hosting only serves static files like HTML, JS, and CSS. Vue source files need to be built first, as shown in steps 1 to 3.

What happens if we forget to upload the dist/ folder contents?

The hosting server will have no files to serve, so the app won't load. This is shown in step 4 where uploading is essential.

Visual Quiz - 3 Questions

Look at the execution_table, what is created after running 'npm run build'?

A Hosting server files

B Vue source code files

C dist/ folder with static files

D Browser cache

💡 Hint

Check step 2 and 3 in the execution_table for build output

At which step does the browser load the Vue app?

A Step 4

B Step 6

C Step 2

D Step 1

💡 Hint

Look for when static files are loaded by the browser in the execution_table

If the dist/ folder is not uploaded, what will happen?

A App will not load

B Hosting serves old files

C App runs normally

D Build command runs again automatically

💡 Hint

Refer to step 4 and 5 about uploading files and hosting serving files

Concept Snapshot

Deployment to static hosting:
1. Write Vue app code.
2. Run 'npm run build' to create static files in dist/.
3. Upload dist/ contents to static hosting.
4. Access app via URL; browser loads static files.
5. App runs fully in browser without server code.

Full Transcript

Deployment to static hosting for a Vue app involves writing the app code, then running the build command 'npm run build' which generates a dist/ folder containing static files like index.html, JavaScript, and CSS. These static files are then uploaded to a static hosting service. When a user visits the app URL, the browser requests and loads these static files, running the Vue app entirely in the browser. This process does not require a backend server because the app is fully static after build. Key steps include building the app to generate static files and uploading those files to the hosting server. Without uploading the dist/ folder, the app will not load. This flow ensures the Vue app is accessible and runs smoothly for users.

Practice

1. What is the main purpose of running npm run build in a Vue project before deployment?

easy

A. To start the development server for testing

B. To create optimized static files ready for hosting

C. To install project dependencies

D. To generate backend API endpoints

Solution

1. Step 1: Understand the build command role

   npm run build compiles Vue files into static assets like HTML, CSS, and JS.

2. Step 2: Identify deployment needs

   Static hosting requires these optimized files to serve the app efficiently.

3. Final Answer:

   To create optimized static files ready for hosting -> Option B

4. Quick Check:

   Build creates static files = A [OK]

Hint: Build command prepares files for static hosting [OK]

Common Mistakes:

• Confusing build with starting dev server
• Thinking build installs dependencies
• Expecting backend code generation

2. Which folder should you upload to your static hosting service after building a Vue app?

easy

A. dist

B. src

C. node_modules

D. public

Solution

1. Step 1: Identify build output folder

   Vue's build process outputs static files into the dist folder.

2. Step 2: Understand hosting requirements

   Static hosts serve files from the dist folder contents, not source or dependencies.

3. Final Answer:

   dist -> Option A

4. Quick Check:

   Upload dist folder = B [OK]

Hint: Upload the dist folder contents for deployment [OK]

Common Mistakes:

• Uploading source code instead of built files
• Uploading node_modules which is unnecessary
• Uploading public folder only

3. After deploying a Vue app's dist folder to GitHub Pages, what will happen if you visit the site URL?

medium

A. You will see the raw source code files

B. You will get a server error because GitHub Pages doesn't support Vue

C. You will see the Vue app running as expected

D. You will be redirected to the Vue CLI homepage

Solution

1. Step 1: Understand GitHub Pages hosting

   GitHub Pages serves static files, perfect for Vue apps built into static assets.

2. Step 2: Predict site behavior

   Visiting the URL loads the static files, so the Vue app runs normally in the browser.

3. Final Answer:

   You will see the Vue app running as expected -> Option C

4. Quick Check:

   Static hosting runs Vue app = A [OK]

Hint: Static hosting runs built Vue app directly [OK]

Common Mistakes:

• Thinking GitHub Pages can't host Vue apps
• Expecting server errors on static hosts
• Confusing source code with built app

4. You deployed your Vue app to Firebase Hosting but the app shows a blank page. What is the most likely cause?

medium

A. You did not configure Firebase to serve the dist folder

B. You uploaded the src folder instead of dist

C. You used the wrong Firebase project ID

D. You forgot to run npm run build before deploying

Solution

1. Step 1: Check build and upload correctness

   Assuming build and upload are correct, the blank page often means Firebase isn't serving the right folder.

2. Step 2: Verify Firebase hosting config

   Firebase needs firebase.json to point to dist as the public directory to serve files.

3. Final Answer:

   You did not configure Firebase to serve the dist folder -> Option A

4. Quick Check:

   Firebase config public folder = D [OK]

Hint: Check Firebase public folder setting matches dist [OK]

Common Mistakes:

• Uploading wrong folder but blaming build
• Ignoring firebase.json public directory setting
• Assuming project ID causes blank page

5. You want to deploy a Vue app with client-side routing to Netlify. Which step is essential to ensure routing works correctly on page reload?

hard

A. Rename dist folder to public

B. Disable JavaScript in the browser

C. Use server-side rendering instead of static hosting

D. Add a _redirects file with /index.html 200 rule

Solution

1. Step 1: Understand client-side routing issue

   On reload, Netlify tries to find the route as a file and fails without redirect.

2. Step 2: Use Netlify redirect rule

   Adding a _redirects file with /index.html 200 tells Netlify to serve index.html for all routes.

3. Final Answer:

   Add a _redirects file with /index.html 200 rule -> Option D

4. Quick Check:

   Redirect rule fixes routing reload = C [OK]

Hint: Use _redirects file for client-side routing on Netlify [OK]

Common Mistakes:

• Ignoring redirect rules causing 404 on reload
• Thinking JavaScript disabling helps routing
• Confusing folder names for deployment