dropthehassle

Put a new Lovable app online as a static site

Lovable apps made from 13 May 2026 onward are TanStack Start apps. As they are, they run on a server, so npm run build doesn't give you a folder you can drop. Build a static copy in SPA mode instead and drop the dist/client folder. Pages that use server functions or /api routes need the app's server: run the whole app on AWS, Google Cloud, DigitalOcean or your own server and connect it in the Backend card.

Your AI can publish. It can never spend your money.

Last updated: 2 October 2026.

Is this you?

Open package.json. If it lists @tanstack/react-start and vite.config.ts uses @lovable.dev/vite-tanstack-config, this guide is for you. Another TanStack Start app without that wrapper: remove the nitro() plugin from the copy instead of adding nitro: false. The build lands in the same dist/client folder. An older Lovable app (React + Vite) builds a plain dist folder: follow the Lovable custom domain guide instead.

First get the code onto your computer: connect the project to GitHub in Lovable (every Lovable plan can), then clone it. You need Node.js 22.12 or newer.

Build a static copy in 5 steps

  1. Leave vite.config.ts as it is, so Lovable keeps building the app its own way. Make a copy of it called vite.config.dth.ts.
  2. In vite.config.dth.ts, add spa: { enabled: true } to the tanstackStart options. If there are none, add tanstackStart: { spa: { enabled: true } }. Also add nitro: false (an option of the Lovable wrapper).
  3. Run npm install, then npx vite build --config vite.config.dth.ts.
  4. Check that dist/client/_shell.html exists. If it doesn't, the build did not run in SPA mode: check step 2.
  5. Drop the dist/client folder at dropthehassle.com. You get a free address like https://something.dropthehassle.app. No card. We use _shell.html as the start page, and every page of the app opens from it.

Or let your AI do it. Paste this into Lovable, Claude Code, Cursor or any AI that can run commands in the project:

Build this TanStack Start app as static files, without changing how it runs on Lovable. Leave vite.config.ts as it is. Create vite.config.dth.ts as a copy of vite.config.ts, then: add spa: { enabled: true } to the tanstackStart options (add tanstackStart: { spa: { enabled: true } } if there is none), and add nitro: false. Run npm install, then npx vite build --config vite.config.dth.ts. Check that dist/client/_shell.html exists. Then list every server function (createServerFn, files ending in .functions.ts) and every /api route, because those only work once the whole app runs on AWS, Google Cloud, DigitalOcean or my own server, connected in the DropTheHassle Backend card, and tell me which pages use them. Tell me when dist/client is ready to upload.

When the app needs its server

Server functions (createServerFn, files ending in .functions.ts) and /api routes need the app's server; the static copy works without them. List them before you upload and check which pages use them. To keep them, run the whole app (its normal build, with the server) on AWS, Google Cloud, DigitalOcean or your own server. Then connect it in the Backend card of your claimed site with the path /*, so every path goes to it, behind your own domain. Your AI can do it for you through our hosted connector. Or keep the app on Lovable as it is. Moving the whole app is in Move your app off Lovable or Replit.

On your own domain

A .com bought here is EUR 19 a year including VAT in the EU, or USD 19 elsewhere, the same every year. No DNS edit. A domain you already own needs one A record: one line at the company where you bought the domain, set to the address shown on your screen. Press Check now. HTTPS follows.

Publish your site for free

Questions

Why won't my new Lovable app upload as it is?

Lovable apps made from 13 May 2026 onward are TanStack Start apps. As they are, they run on a server, so npm run build gives no folder to drop. A static copy built in SPA mode is a set of files we put online. Or run the whole app on AWS, Google Cloud, DigitalOcean or your own server and connect it in the Backend card.

What about server functions and /api routes?

They need the app's server, so the static copy works without them. To keep them, run the whole app on AWS, Google Cloud, DigitalOcean or your own server and connect it in the Backend card. Pages, routing and anything the browser does on its own work in the static copy straight away.

Does this change my app on Lovable?

No. vite.config.ts stays as it is. The static build uses its own copy, vite.config.dth.ts, so Lovable keeps building the app its own way.