---
title: "How to deploy a Vite application"
description: "Build and publish a Vite application as a static site, with support for common Vite frameworks and single-page app routing."
canonical_url: "https://ample.computer/guides/deploy-vite-app"
last_updated: "2026-07-30"
author: "Ample Computer"
---

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

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

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.

   ```sh
   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.

   ```sh
   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

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

## Related guides

- [How to deploy a React app without DevOps](https://ample.computer/guides/deploy-react-app-without-devops)
- [How to publish an AI-generated website](https://ample.computer/guides/publish-ai-generated-website)
- [How to add environment variables during deployment](https://ample.computer/guides/environment-variables-deployment)

## Machine-readable resources

- [llms.txt](https://ample.computer/llms.txt) | [AGENTS.md](https://ample.computer/AGENTS.md) | [sitemap.md](https://ample.computer/sitemap.md) | [OpenAPI](https://ample.computer/openapi.json)