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.
Learning Objectives
By the end of this lesson, you'll be able to:
- Explain Vite source files versus production output
- Run npm run dev and npm run build for the right purpose
- Identify dist, build commands and publish directories
- Read build logs and spot common Vite deployment mistakes
Why This Matters:
Vite makes development fast, but deployment should serve production output rather than the development workshop.
Before You Start:
You should be familiar with:
- Uploading a Plain HTML, CSS and JavaScript Website Review here
The Vite Deployment Flow
src/
-> npm run build
-> dist/
-> Hosting platformnpm 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.
Build and Deploy a Vite Site
Run the development version
Run the project locally, often with npm run dev, and fix visible local problems first.
Create the production build
Run npm run build. In many Vite projects, including GraphitEdge, the production output is dist/.
Inspect the output
Use the project preview command where configured, or inspect the generated folder so you know which files will be published.
Deploy and read the logs
For manual static hosting, deploy the built output. For Git-connected hosting, check the build command, output directory and build log.
You're on track if you can:
- The development site runs locally
- The production build completes
- The output folder is identified
- Build logs are checked
- The live site is tested after deployment
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.
Git-Connected Vite Deployment
A Git-connected platform normally:
- clones the repository
- installs dependencies
- runs the build command
- publishes the configured output directory
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
Ready for the Next Deployment Step
Key Takeaways:
- Deployment is a publishing workflow, not just a button.
- The live URL is where deployment evidence is gathered.
- The right hosting path depends on files, update workflow, support needs and ownership.
- Troubleshooting starts with the first meaningful error.
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- Understand Vite source files, production builds, dist output, build commands, publish directories, environment variables, and routing concerns. Check!
If you can name which part of the system you are changing, test the live result and record the outcome, deployment is becoming a repeatable workflow.
Think & Reflect:
Deployment evidence
- What would prove this site works for someone else?
Next action
- What should be recorded so this deployment can be repeated later?
Looking Ahead:
Next: continue with Domains, DNS, HTTPS and Going Live.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Domains, DNS, HTTPS and Going LiveRelated Topics
Explore these related tutorials to expand your knowledge: