# Vite

React, Vue or Svelte via Vite — build to dist/ and add --spa when routing happens in the browser.

Vite builds to `dist/`. Whether you need `--spa` depends on whether your app
routes in the browser.

```console title="vite"
$ npm run build
vite v7.0.0 building for production...
✓ built in 1.42s
$ one9x pages release ./dist --site mysite --spa --deploy
✓ v1 live
→ https://mysite.one9x.app/
```

## Do you need --spa?

**Yes**, if you use React Router, Vue Router, TanStack Router or any other
client-side router. The build produces one `index.html` and every route is
resolved in the browser; without `--spa` a hard refresh on `/settings` is a 404.

**No**, if the app is a single page with no routing — a landing page, a
dashboard behind one URL, a widget demo.

## Base path

If you deploy under a subdirectory, set Vite's `base` to match. On a One9x site
you are at the root of your own subdomain, so the default `base: '/'` is
correct and you should not need to touch it — a `base` left over from a GitHub
Pages project subdirectory is the usual cause of a site that loads a blank page
with 404s on every asset.

## Source maps

Vite emits source maps only if you ask for them, but plugins and framework
presets sometimes turn them on. To keep them out of a public deploy:

```console title="no source maps"
$ one9x pages release ./dist --site mysite --spa --deploy --exclude '*.map'
6 path(s) excluded
✓ v2 live
```

## Start from a template

Live, and deployed by the workflow in that repo on every push:
**[vite.one9x.app](https://vite.one9x.app/)**.

[`one9x/template-vite`](https://github.com/one9x/template-vite) is a minimal Vite starter
with this deploy already wired up. Press **Use this template** on GitHub to get
your own copy, or read it as a reference for a project you already have.

Set two things in the new repo under **Settings → Secrets and variables →
Actions** and it deploys on every push:

| | Name | Value |
| --- | --- | --- |
| Variable | `ONE9X_SITE` | the site to deploy to |
| Secret | `ONE9X_TOKEN` | `one9x tokens create "github actions"` |

Until `ONE9X_SITE` is set the workflow is skipped rather than failed — a fresh
copy should not open with a red X.

## Deploying on every push

```yaml
- uses: actions/setup-node@v5
  with: { node-version: 22, cache: npm }
- run: npm ci
- run: npm run build
- uses: one9x/pages-deploy@v1
  with:
    site: mysite
    dir: dist
    spa: true
    token: ${{ secrets.ONE9X_TOKEN }}
    deploy: ${{ github.ref == 'refs/heads/main' }}
```

The full workflow, with preview URLs on pull requests, is in [GitHub
Actions](/docs/github-actions).