How to deploy a Vite application | Ample

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.

Before you start

This guide is for builders using Vite with React, Vue, Solid, or a plain JavaScript frontend.

How to do it

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

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.

Deploy the app

From a standalone Vite project, one deploy command is usually enough.

ample deploy

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.

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

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.