VITE DEPLOYMENT
How to deploy a Vite application
Build and publish a Vite application as a static site, with support for common Vite frameworks and single-page app routing.
DIRECT ANSWER
The short version
A Vite application is normally deployed from its production build output. Ample detects common Vite projects, installs dependencies, runs the build, verifies the static artifact, and serves it at a generated HTTPS URL. For a simple app, run ample deploy from the project directory.
WHO THIS IS FOR
Before you start
This guide is for builders using Vite with React, Vue, Solid, or a plain JavaScript frontend.
STEP BY STEP
How to do it
-
1
Verify the Vite build
Run the package build script and confirm the output directory is created. The default is commonly dist, but the project config is the source of truth.
npm run build -
2
Check public environment variables
Vite replaces VITE_ variables at build time. Only put values in that namespace if they are safe to expose to every browser user.
-
3
Deploy the app
From a standalone Vite project, one deploy command is usually enough.
ample deploy -
4
Test direct navigation
Open the home page and a nested client route. If the app is a single-page app, direct navigation should return the frontend entry point.
FIT CHECK
What this supports
Good fit
- Vite with React, Vue, Solid, and plain JavaScript
- Static production output
- Single-page app fallbacks
- Build-time VITE_ environment variables
Know the limits
- Vite development servers are not the production artifact
- VITE_ values are visible in the client bundle
- A separate backend must be deployed and linked independently
TROUBLESHOOTING
Common failure modes
Assets return 404
Check the Vite base setting and confirm the built HTML references deployable asset paths.
A nested route returns 404 on refresh
Confirm the deployment is treated as a single-page app with a fallback to index.html.
An environment value is missing
Pass the VITE_ value at build time, then create a new deployment so the bundle is rebuilt.