## 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

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.

## 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.