# Vite hosting

Host a Vite app or site: npm run build writes dist/, and npx lobsite deploys it with HTTPS. Client-side routing works with spa = true or a dashboard switch.

On the web at https://lobsite.com/hosting/vite

```sh
npm run build && npx lobsite
```

Builds into dist/ and deploys it. public/ is left alone: Vite copies it into dist/ for you.

Vite builds React, Vue, Svelte, Solid and plain JavaScript projects into a folder of static files, `dist/`. Lobsite hosts that folder. Run `npm run build`, then `npx lobsite`, and the app is live at a `*.lobsite.app` address with HTTPS. If the app has client-side routing, one setting makes deep links work.

## How it works

1. **Build** with `npm run build` (that's `vite build`). The app lands in `dist/`, with hashed files in `dist/assets/`.
2. **Run `npx lobsite`** in the project. It deploys `dist/`, not `public/`, which Vite has already copied into the build. The first deploy needs no account and lasts 6 hours.
3. **Turn on single-page mode** if the app has a router: add `spa = true` to `lobsite.toml`, or flip **Single-page app** in the site's settings. Then keep the site with the claim link, in a free account.

## Routing and single-page mode

A Vite app with React Router, Vue Router or TanStack Router has one `index.html`. Opening `/settings` directly asks the server for a file that doesn't exist. With single-page mode on, Lobsite answers those paths with your `index.html`, and the router draws the page:

```toml
# lobsite.toml
spa = true
```

Only page requests get the app. A missing file such as an old `/assets/index-3f9a.js` gets a real 404, so a visitor who still has the previous version open after a deploy gets a clear error, not HTML in place of a script. The deploy prints a tip when `package.json` has a router and single-page mode is off. More in the [docs](https://lobsite.com/docs#spa).

## vite.config and the build

- **`base`** stays at its default, `/`: the app is served from the top of its address. Set it only for a GitHub Pages project site, then remove it when you move.
- **Environment variables** starting with `VITE_` are written into the build. They're visible to anyone who opens the app, so keep secrets out of them; `.env` files themselves are never deployed.
- **Several pages** (`build.rollupOptions.input` with more than one HTML file) are a multi-page site: each page is a file, and single-page mode isn't needed.
- **`npm run preview`** serves `dist/` locally, which is the quickest check before a deploy.

## Caching hashed files

Vite puts a hash of each file's contents in its name, as in `index-3f9a.js`, so a file with a given name never changes. Lobsite stores files by content too, so a deploy uploads only the chunks that changed. To let browsers keep those files for a year, add a header rule:

```toml
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
```

`index.html` is always checked again, so visitors get the new version straight after a deploy.

## Vite hosts compared

| | Lobsite | Netlify | Vercel | GitHub Pages |
|---|---|---|---|---|
| Deep links in a single-page app | `spa = true`, or a switch in the dashboard | A `_redirects` rule | A rewrite in `vercel.json` | No: copy `index.html` to `404.html`, served with status 404 |
| Missing script files | 404 | The app's `index.html` | The app's `index.html` | 404 |
| Builds on the server | No: you deploy `dist/` | Yes | Yes | In GitHub Actions |
| Account before the first deploy | No: live 6 hours, then keep it free | Yes | Yes | Yes, and a repository |
| Custom domain | Yes, free | Yes | Yes | Yes |

Netlify and Vercel build from Git and run server functions. Lobsite is the quickest way to put a built Vite app online from your machine, CI or an AI agent, with single-page routing that's one line or one click.

## Frequently asked questions

### Why do Vite app pages other than the home page show "Not found"?

The app uses client-side routing, and the server has no file for those paths. Turn on single-page mode: `spa = true` in `lobsite.toml`, or **Single-page app** in the site's settings.

### Does Lobsite run my Vite build?

No. Build on your machine or in CI, then deploy `dist/`. What you checked with `npm run preview` is exactly what goes live.

### Can I use Vite environment variables?

Yes, the `VITE_` ones, which are written into the build when you run it. Build again after changing them. Anything secret belongs on a server, not in a Vite app.

### Does a Vite multi-page site need single-page mode?

No. Each HTML page is its own file, and `about.html` opens at `/about`. Leave single-page mode off, so a mistyped address gets your `404.html`.