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.