Deploy a Lovable app

1. Sync the project to GitHub

Lovable's GitHub integration creates a repository for your project and keeps the two in sync both ways. In Lovable, open Project settings → Git → GitHub (or, from the chat, +, then Project → GitHub), and choose Connect next to the GitHub account or organization where the repository should go.

Things Lovable's documentation says to know:

• The repository it creates is private by default.
• It syncs one branch at a time, normally main. Changes pushed to that branch sync back into Lovable.
• Don't delete the repository: that stops the sync. Renaming it keeps it running.
• Only workspace or project admins and owners can connect a project.

If you'd rather not connect GitHub, Lovable also offers Download codebase. Then create a repository yourself and push the folder, as in Deploy a vibe-coded app. You lose the sync, so prefer the connection.

2. Check which kind of app it is

Lovable's documentation describes two kinds of project, and they deploy differently:

3. Know what's public and what's secret

A Lovable project keeps browser settings in a committed .env file. Lovable's documentation is explicit: values starting with VITE_, such as VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY, are built into the page and visible to anyone. They're meant to be public, and the build reads them from that file, so you don't need to set them on ComputeSphere. Lovable also says not to add .env to .gitignore, because its previews need it.

What must stay private, such as a payment or AI provider key, belongs in Lovable's Secrets, used by its Edge Functions on Lovable's backend. Before you deploy, check that no private key has a VITE_ name or sits in the code: anything there is shipped to every visitor.

If your app uses Lovable's built-in backend (Cloud), it keeps using it from ComputeSphere: the frontend calls the same address with the same publishable key. ComputeSphere doesn't host databases, so moving your data is a separate job; Lovable documents it under deploying outside Lovable.

4. Create the service

A React + Vite project: a static site

1. Connect GitHub to ComputeSphere

   Your repository is private, so ComputeSphere needs read access to it. Follow lesson 5.3.1: add a GitHub connection and give the ComputeSphere app access to only this repository.

   You should seeYour GitHub connection listed under Connections.

2. Start a static site

   In your project, choose New service, then Static Site. Name it and choose or create an Environment.

   You should seeThe New service form with Service information, Environment, Configuration and Build settings.

3. Point it at the repository

   Under Configuration, choose Private (Connections), your connection, your repository and the branch Lovable syncs (usually main). For a public repository, Public and its URL work too.

   You should seeYour repository and branch filled in.

4. Set the build

   Wait a moment after choosing the repository, then fill in Build settings: Build command npm run build, Publish directory dist, Install command npm ci. These match Lovable's own instructions for building outside Lovable.

   You should seeBuild command npm run build and Publish directory dist.

5. Deploy

   Choose Deploy. When the service shows Running, open its URL and click through a few pages, then reload one: deep links serve your app too, so client-side routes work.

   You should seeRunning, and a URL ending in computesphere.app that shows your app.

A TanStack Start project: a web service

This needs a running server. TanStack Start's hosting guide covers a Node.js server: the build produces .output/server/index.mjs, started with node .output/server/index.mjs. Lovable's documentation says that outside Vercel, Netlify and Cloudflare you choose the target with nitro: { preset: "<name>" } in vite.config.ts; follow TanStack's guide for the Node.js preset.

Then create a Web Service from the repository as in Deploy a vibe-coded app: Managed build, runtime Node.js, Build command npm ci && npm run build, Start command node .output/server/index.mjs, and Port set to the port the server prints at start-up, which you'll see in the service's runtime log. The static path above is the one we ran on ComputeSphere for this guide; for this one, read the runtime log on your first deploy.

5. Keep shipping

You keep editing in Lovable; each change syncs to the branch. Pushing doesn't deploy on its own here: when you're ready, open the service, choose Redeploy, keep Build & deploy, and confirm. ComputeSphere builds the latest commit.

What can go wrong