Deployment module

Building and Deploying a Vite Website

Understand Vite source files, production builds, dist output, build commands, publish directories, environment variables, and routing concerns.

The Vite Deployment Flow

src/
  -> npm run build
  -> dist/
  -> Hosting platform

npm run dev starts a development server. It is for local work. npm run build creates production-ready files. In many Vite projects, the output folder is dist.

Think of the source project as the workshop and dist as the packed result. The workshop contains source files, dependencies, configuration and development conveniences. Visitors do not need that whole workshop. They need the built HTML, CSS, JavaScript and assets that Vite prepares for production.

npm run dev    # local development server
npm run build  # production output
npm run preview # local preview of the built output, when configured

Manual Static Hosting With Vite

When manually deploying a Vite project to static hosting, students should usually deploy the generated dist output, not the source project folder. Check whether the host expects the folder itself or the contents of the folder.

If your built files live in dist/, manually uploading the repository root can publish the wrong thing. The host may receive src/, package.json and configuration files but no production-ready homepage. Build first, inspect the output, then upload the output expected by the host.

Git-Connected Vite Deployment

A Git-connected platform normally:

1. clones the repository
2. installs dependencies
3. runs the build command
4. publishes the configured output directory

For a typical Vite project the build command is often npm run build and the publish directory is often dist. Do not type those from memory if the project differs: read package.json and the hosting platform's framework settings. If the build fails, the log is not decoration. It is the first witness.

Static Hosts for Vite and Frontend Builds

Common Vite Deployment Mistakes

• publishing src
• publishing the repository root when the host expects built output
• using the wrong build command
• setting the wrong output directory
• missing environment variables
• incorrect base path configuration
• broken SPA routing or missing fallback configuration

If the site appears as a white page after deployment, open the browser console and Network panel. Missing JavaScript files, 404s for assets, or errors mentioning environment variables often point directly to the deployment setting that needs attention.