Deployment to static hosting in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to build the Vue app for production.

Vue

npm run [1]

Drag options to blanks, or click blank then click option'

Aserve

Bstart

Cbuild

Ddev

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' instead of 'build' will start a local server, not build files.

Using 'dev' runs the development server, not production build.

Running npm run build creates the optimized files for static hosting.

2fill in blank

medium

Complete the code to serve the built files locally for testing.

Vue

npx [1] dist

Drag options to blanks, or click blank then click option'

Avue-cli-service

Bhttp-server

Cnpm

Dserve

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm dist' is invalid.

Using 'vue-cli-service' requires extra arguments.

npx http-server dist serves the static files locally for preview.

3fill in blank

hard

Fix the error in the Vue config to set the correct base path for static hosting.

Vue

export default {
  [1]: '/my-app/'
}

Drag options to blanks, or click blank then click option'

AassetsDir

BbaseUrl

CoutputDir

DpublicPath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'baseUrl' is deprecated and won't work in Vue 3.

Setting 'outputDir' changes build folder, not base path.

The publicPath option sets the base URL for the app when deployed.

4fill in blank

hard

Fill both blanks to configure the Vue app to output files to a folder named 'static' and set assets directory to 'assets'.

Vue

export default {
  outputDir: '[1]',
  assetsDir: '[2]'
}

Drag options to blanks, or click blank then click option'

Astatic

Bdist

Cassets

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'dist' with 'static' for outputDir.

Setting assetsDir to 'dist' is incorrect.

outputDir sets the build folder name, and assetsDir sets the folder for static assets inside it.

5fill in blank

hard

Fill all three blanks to create a simple GitHub Pages deployment script in package.json scripts.

Vue

"scripts": {
  "predeploy": "npm run [1]",
  "deploy": "gh-pages -d [2] --branch [3]"
}

Drag options to blanks, or click blank then click option'

Abuild

Bdist

Cgh-pages

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' instead of 'build' in predeploy.

Deploying from wrong folder or branch.

The predeploy script builds the app, and deploy publishes the dist folder to the gh-pages branch using gh-pages.