# How to host a Lovable site

Host a Lovable project built with React and Vite: download the code, build it once, drop the folder it creates, and turn on single-page app mode.

This page is for Lovable projects built with **React and Vite**. You download
the project's code, turn it into a finished site with one build on your
computer, and drop the folder that creates.

## Check which kind of project you have

Lovable builds projects in more than one way, and the setup it uses has changed
over time. Some projects use TanStack Start, which builds each page on a server
when someone visits it. Pages hosts finished files and runs no server, so
**these steps don't work for TanStack Start projects**.

Lovable's docs explain which setups it uses and how to tell which one your
project has: [What tech stacks does Lovable
use?](https://docs.lovable.dev/introduction/faq) The quickest way is to ask
Lovable: *What stack is this project on?* Once you have the code, you can also
open `package.json`: if it lists `@tanstack/react-start`, the project uses
TanStack Start.

> **Starting a new site, or about to publish?** Paste [the One9x
> prompt](/docs/ai-tools/prompt) into the tool first — it builds static files,
> wires any form to your site's built-in form service, and keeps inside the limits.

## 1. Get the code

- **On a paid Lovable plan:** open the code editor and select **Download
  codebase** at the bottom of the file panel. The same option is under
  **Project settings → Git**. ([Lovable: download your project's
  codebase](https://docs.lovable.dev/features/code-mode))
- **On the free plan:** connect the project to GitHub with Lovable's **Git
  sync**, then download the repository from GitHub with **Code → Download
  ZIP**. ([Lovable: Git sync](https://docs.lovable.dev/integrations/git-sync-overview))

Unzip it.

## 2. Build it

You need [Node.js](https://nodejs.org) installed once. Then open a terminal in
the unzipped folder and run:

```console title="build"
$ npm install
$ npm run build
✓ built in 2.31s
```

The build creates a new folder inside the project, with `index.html` in it.
That new folder is the one you drop — see [Details](#details) for its name.

## 3. Drop it and turn on single-page app mode

Drop the folder on your site's **Overview** tab, as in [Deploy from the
dashboard](/docs/dashboard). In the review, select **Deploy options** and choose
**Single-page app** under **Unknown paths**, then **Upload and stage** and
**Make live**.

Lovable apps draw every page in the browser from one `index.html`, so without
this setting anyone who refreshes on `/about` or opens a shared link to it gets
a "not found" page. [SPA mode & error pages](/docs/spa-and-errors) explains why.

## Add a contact form

If the site has a contact form, it needs somewhere to send submissions. Your
One9x site already has one, free: define the form under **Widgets → Forms** and ask
the tool to use the HTML the dashboard generates. [Widgets](/docs/widgets#with-an-ai-tool)
has the steps and a sample prompt.

## Common mistakes

**Dropping the whole project.** If the review lists `package.json`, `src` or
`node_modules`, you dropped the project instead of the folder the build created.
Discard it and drop the inner folder.

**A folder inside a folder.** `index.html` must be at the top level of what you
drop, not one folder further down.

**A blank page when you double-click `index.html` on your computer.** That is
expected: the page looks for its files at the top of a website (`/assets/…`),
which only exists once it's online. It is not a sign the upload will fail.

**A blank page online, with missing scripts.** The project is set to live under
a sub-folder of a website instead of at the top. [Vite](/docs/frameworks/vite#base-path)
explains the setting.

## Details

Lovable projects build with Vite, so `npm run build` writes `dist/`. From the
CLI:

```console title="lovable"
$ one9x pages release ./dist --site mysite --spa --deploy
✓ v1 live · unknown routes → /index.html
→ https://mysite.one9x.app/
```

Everything on the [Vite](/docs/frameworks/vite) page applies, including
deploying on every push with [GitHub Actions](/docs/github-actions) once the
project is on GitHub.