Deployment to static hosting in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is static hosting in the context of web applications?

Static hosting means serving files like HTML, CSS, and JavaScript directly to users without running server-side code. It is simple and fast, ideal for Vue apps built into static files.

beginner

Which Vue CLI command prepares your app for static hosting?

The command npm run build or yarn build creates a dist folder with optimized static files ready for deployment.

intermediate

Why do you need to set the publicPath in vue.config.js when deploying to static hosting?

Setting publicPath tells Vue where your app will be served from, so it can correctly link CSS, JS, and assets. For example, if hosted in a subfolder, you set publicPath: '/subfolder/'.

beginner

Name two popular static hosting services suitable for Vue apps.

Netlify and GitHub Pages are popular static hosting services. They easily serve Vue's built static files and often support continuous deployment from Git repositories.

intermediate

What is a common issue when deploying Vue apps with client-side routing to static hosts, and how can it be fixed?

Client-side routing can cause 404 errors on page refresh because static hosts look for files matching the URL. Fix this by configuring the host to fallback to index.html or use hash mode routing.

Which folder contains the static files after running npm run build in a Vue project?

A node_modules

B src

C public

D dist

The dist folder holds the optimized static files ready for deployment.

What does setting publicPath in vue.config.js affect?

A The port Vue runs on locally

B The version of Vue used

C Where Vue looks for assets and files when deployed

D The style of the app

publicPath sets the base URL for assets in the built app.

Which hosting service is NOT typically used for static Vue app hosting?

A Netlify

B Heroku

C GitHub Pages

D Vercel

Heroku is mainly for server-side apps, not static hosting.

How can you avoid 404 errors on page refresh with Vue Router in history mode on static hosts?

A Configure the host to fallback to index.html

B Use inline styles

C Disable JavaScript

D Use a different port

Fallback to index.html lets the Vue app handle routing client-side.

What command builds a Vue app for production deployment?

A npm run build

B npm start

C npm test

D npm install

npm run build creates the production-ready static files.

Explain the steps to deploy a Vue app to a static hosting service.

Think about building, configuring paths, uploading files, and routing setup.

Describe why client-side routing can cause problems on static hosts and how to solve it.

Consider how static hosts handle URLs and how Vue Router works.

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