Deployment to static hosting in Vue - Mini Project: Build & Apply

Deployment to static hosting

📖 Scenario: You have built a simple Vue app and want to share it with friends by putting it on a static hosting service like GitHub Pages or Netlify.This project will guide you through preparing your Vue app for deployment and configuring it for static hosting.

🎯 Goal: Prepare a Vue 3 app for static hosting by setting the correct base URL, building the app, and adding a deployment configuration file.

📋 What You'll Learn

Create a Vue 3 app with a basic App.vue component

Set the base option in vite.config.js for static hosting

Build the app using the Vue CLI or Vite build command

Add a netlify.toml file to configure Netlify deployment

💡 Why This Matters

🌍 Real World

Deploying Vue apps to static hosting services is common for personal projects, portfolios, and small business websites.

💼 Career

Understanding deployment prepares you for real-world frontend roles where you must publish apps for users to access.

1

Create a basic Vue 3 app

Create a file called App.vue with a template that shows <h1>Welcome to My Vue App</h1> and a script section exporting a default empty object.

Vue

  



// Your script here

Hint

Use the <template> tag for HTML and <script setup> for Vue 3 script.

2

Set the base URL in vite.config.js

In vite.config.js, import defineConfig from 'vite' and export default a config object with base set to '/my-vue-app/'.

Vue

import { defineConfig } from 'vite'

// Your config here

Hint

The base option tells Vite the root path your app will be served from.

3

Build the Vue app for production

Run the build command npm run build or yarn build to create the dist folder with static files ready for deployment.

Vue

// Run the build command in your terminal
# Your code here

Hint

This step is done in the terminal, but type the command exactly as npm run build in the editor to confirm.

4

Add Netlify deployment config

Create a file called netlify.toml with these lines:
[build]
publish = "dist"
command = "npm run build" to tell Netlify how to build and serve your app.

Vue

# Your netlify.toml content here

Hint

This file tells Netlify where your built files are and how to build your app.