Before you migrate
Lovable runs the whole app for you: hosting with custom domains and HTTPS, deployments and preview environments, the built-in backend (Cloud) with authentication, a database, and file storage, and AI and connector access at runtime. Most teams keep that setup and never need this guide. Move part of your app outside Lovable when you have a requirement that this setup does not cover: a deployment pipeline of your own, a compliance or data residency rule that specifies where the app must run, or an organizational policy on hosting. Each part you move becomes yours to run, update, and secure. Each section below lists what that includes for its part of the app. Pick the path that matches your situation:Check how your project is built
Lovable builds apps on one of two stacks, and each needs different hosting:package.json in the Code tab. A TanStack Start project lists @tanstack/react-start under its dependencies. An older React + Vite project does not. You can also ask Lovable in the project chat:
Get your source code
Every scenario in this guide starts from a copy of your project’s code outside Lovable. You have two ways to get one:- Git sync, available on all plans. Connect the project to a repository on GitHub, GitLab, or Bitbucket, and Lovable keeps the two in sync both ways. Use this for any ongoing deployment: hosting platforms deploy from the repository, and Lovable continues to manage development and previews. The examples on this page use GitHub. The same steps apply to a GitLab or Bitbucket repository on platforms that deploy from those providers.
- Download codebase, available on paid plans, for a one-time snapshot as a
.zipfile. Open the code editor and click Download codebase at the bottom of the file panel, or use the Download codebase section in Project settings → Git. On Enterprise workspaces, admins can limit downloads to workspace admins and owners. See Download your project’s codebase.
package-lock.json. If it only has bun.lock, use Bun for installation or run npm install locally and commit the generated package-lock.json before using npm ci in CI or Docker. Keep the install command and lockfile consistent on your host.Deploy a TanStack Start app
TanStack Start apps run server code, so the host has to run a server, not only serve files. For an older React + Vite app, see Deploy an older React + Vite app. Your project’s build configuration, the@lovable.dev/vite-tanstack-config package in package.json, prepares the server output for the host through Nitro, a build tool that adapts a server app to the platform it runs on.
Nitro calls each platform a preset and has presets for most cloud platforms and server runtimes, which is what makes a TanStack Start app portable: you can deploy the same code to any of them. Inside Lovable the preset is fixed. Outside Lovable, the build picks the preset for the platform it detects, or the one you name. Nitro’s deployment guide lists every supported platform.
When the frontend runs outside Lovable, you take on its deployment pipeline, environment variables, availability, logs, and preview environments, and Lovable cannot monitor or debug infrastructure it does not control.
Check that package.json lists nitro. Without it, the build does not package the app for a hosting platform. Setting the nitro option in vite.config.ts without installing the package produces an error asking you to add it.
Deploy from your repository to a platform Nitro detects
On the platforms Nitro detects automatically, including Vercel, Netlify, and Cloudflare Pages, a build from your repository picks the matching preset with no configuration. Nitro’s deployment guide lists all of them.Connect your repository
Configure the build
npm run build and use Node.js 22. On Netlify and Cloudflare Pages, set the publish or build output directory to dist. Vercel needs no output directory setting.Configure environment variables
.env file: VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY for the browser, and SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY for the server. Add the secrets your server functions read as well. Those are not in the repository.Update sign-in redirect URLs
Deploy
Object storage and CDN hosting
A TanStack Start app does not run from object storage or a CDN alone, because those serve files and do not run the server part. Use a platform Nitro detects, a container, or your own server instead.Deploy to a container or your own server
For a host the build does not detect, build with Nitro’s Node.js server preset and run the result with Node.js.Build with the Node.js server preset
nitro option to the defineConfig call your project already has in vite.config.ts. Keep any other options that call already passes:VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY before the build, since browser values are embedded at build time.Run the server
.output directory. Start it with Node.js 22:3000. Set PORT and HOST to change that. Set SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, and the secrets your server functions read as environment variables where the server runs.Put it behind your web server
3000 unless you changed it, and handle HTTPS there. The VM example further down this page shows a certificate setup with Certbot. Do not use the Nginx try_files fallback from the older React + Vite examples: the server handles routing.npm ci and the build with the preset, and a Node.js 22 stage that copies .output and runs node .output/server/index.mjs on port 3000. For other runtimes and platforms, such as Deno or Bun, pick the matching preset from Nitro’s deployment guide, and see TanStack Start’s hosting guide for the framework side.
Deploy an older React + Vite app
This section is for older React + Vite apps. They build to static files, so any static host can serve them. For a TanStack Start app, see Deploy a TanStack Start app.Host on a managed platform
The frontend is usually the first part to move outside Lovable. You deploy the production frontend to a managed hosting platform while continuing to use Lovable for development and previews. Your backend and data can remain on the built-in backend (Cloud) or run elsewhere.What you’re responsible for
When the production frontend runs outside Lovable, you are responsible for:- Frontend deployment pipelines and rollbacks
- Production environment variables
- CDN behavior and caching
- Frontend availability and uptime
- Production logs and deployment history
- Preview environments for production branches or releases
Common approaches
- Git-based hosting platforms
These platforms connect directly to your GitHub repository and automatically build and deploy on each push:- Netlify
- Cloudflare Pages
- Vercel
- AWS Amplify Hosting
- Azure Static Web Apps
- Google Firebase Hosting
- Object storage + CDN hosting
These platforms host static files behind a CDN but require a build pipeline to generate and upload thedist/output.- AWS: S3 + CloudFront
- Google Cloud: Cloud Storage + Cloud CDN
- Azure: Azure Storage (Static Website) + Azure CDN or Front Door
Deploying to a Git-based hosting platform
This approach applies to platforms that automatically build and deploy from your GitHub repository.Example: Deploying to a Git-based hosting platform
Example: Deploying to a Git-based hosting platform
Connect your repository
Configure build settings
- Build command:
npm run build - Output directory:
dist - Node version: 22
Configure environment variables
.env file:.env file in Lovable’s code editor or in your synced GitHub repository.Configure SPA routing
404, configure a fallback rewrite so all routes serve /index.html. The method varies by platform (for example, _redirects file on Netlify/Cloudflare, staticwebapp.config.json on Azure, rewrite rules on Amplify, vercel.json on Vercel, firebase.json on Firebase).Update OAuth redirect URLs
Deploy
Deploying to object storage + CDN with CI/CD
CDN-backed hosting requires a CI/CD pipeline to build your app and upload thedist/ output. Build steps are identical across providers. Deployment is provider-specific, see links to official documentation for each platform.
Example: Deploying to object storage + CDN with CI/CD
Example: Deploying to object storage + CDN with CI/CD
- AWS: Use IAM roles with OIDC
- Google Cloud: Workload Identity Federation
- Azure: Federated identity credentials
Add GitHub secrets
Create the workflow file
.github/workflows/deploy.yml in your repository:Add provider-specific deployment steps
Configure SPA routing
index.html with a 200 status code for routes that don’t match a file. This is typically configured as:- A custom error response returning 200 (CloudFront)
- A URL rewrite rule on a load balancer (Cloud CDN)
- A URL rewrite rule (Front Door)
Host on your own infrastructure
Use this approach when you need full control over frontend hosting, networking, or runtime environment. This is sometimes referred to as self-hosting. The frontend is built from your GitHub repository and deployed to infrastructure you manage. The backend and data can remain on the built-in backend (Cloud) or run elsewhere.What you’re responsible for
When the production frontend runs on infrastructure you manage, you are responsible for:- Build and deployment automation
- SSL/TLS configuration
- CDN and reverse proxy configuration
- Monitoring, logging, and uptime
- Infrastructure updates and security
- Preview environments for branches or releases
Common approaches
- Container-based deployments
For example: Docker deployed via Kubernetes (EKS, GKE, AKS), ECS, Nomad, or internal container platforms - Virtual machines behind a web server
For example: Linux VMs running Nginx or Apache, managed through configuration management or internal tooling - Internal PaaS platforms
For example: company-internal deployment platforms or private cloud PaaS solutions
Build requirements
- Build command:
npm run build - Output directory:
dist/ - Node version: 22 recommended
VITE_ are embedded at build time, not runtime.
If using the built-in backend (Cloud), you must set these before running npm run build:
VITE_SUPABASE_URLVITE_SUPABASE_PUBLISHABLE_KEY
.env file.
Container-based deployment (Docker)
Example: Manual Docker deployment
Example: Manual Docker deployment
Clone your GitHub repository
Create a Dockerfile
npm run build, and the second stage serves the static output with nginx.Here’s an example Dockerfile you can adapt:Create an nginx configuration file
index.html for all routes. Create an nginx.conf file:Build the container image
Push to your container registry
Deploy using your orchestration platform
Example: Automated Docker deployment (CI/CD)
Example: Automated Docker deployment (CI/CD)
- AWS ECR: Use IAM roles with OIDC
- Google Artifact Registry: Workload Identity Federation
- Azure Container Registry: Federated identity credentials
- GitHub Container Registry: Use GITHUB_TOKEN (no secrets needed)
- A container registry (for example, GitHub Container Registry, AWS ECR, Google Artifact Registry, Azure Container Registry, Docker Hub)
- The
Dockerfileandnginx.conffiles from the manual container-based deployment section above - An orchestration platform to deploy the container (for example, Kubernetes, ECS)
Add GitHub secrets
Create the workflow file
.github/workflows/deploy-container.yml in your repository:Configure registry authentication
VM or static server deployment
Example: Manual VM or static server deployment
Example: Manual VM or static server deployment
Clone your GitHub repository
Install dependencies
Build the application with environment variables
dist/ directory.Upload the build output to your server
scp:rsync:Configure your web server
index.html for all routes.Example nginx configuration:Configure TLS (recommended)
Verify before switching traffic
Deploy to a temporary URL on the new host first, and check it against the app running on Lovable:- Open a nested route directly and refresh the page. A
404usually means the host is missing theindex.htmlfallback (older React + Vite apps) or is not running the server part (TanStack Start apps). - Sign in and sign out. A redirect error usually means the new URL is missing from your authentication provider’s allowed redirect URLs.
- Run the reads, writes, and uploads your app depends on.
- For TanStack Start apps, open a server-rendered page and trigger a server function, not only the browser interface.
lovable.app address stays with Lovable and keeps serving the version you last published there. Lovable’s Publish button continues to publish to Lovable hosting only. If you keep Git sync connected, each change Lovable pushes to the repository can trigger a deployment on the new host, following the branch and review rules you configured there.
Host backend and data on a managed provider (Supabase example)
This option is typically chosen when you need direct database access, advanced database features, or clearer separation of infrastructure ownership, without taking on full operational responsibility. You move your backend services and database to a managed backend provider. The most direct migration path is to managed Supabase, which closely matches the built-in backend’s architecture. The production frontend can run on Lovable or elsewhere. After migration:- The production frontend needs to point to the new backend
- You can continue using the Lovable editor and preview environments during development
Migration sequence at a glance
Keep the app running on the built-in backend (Cloud) while you prepare the new backend, and point the app at it only when the destination is complete:- Create the destination. A new Supabase project. Note its URL, project ID, and publishable key.
- Move the structure. Locate your project’s migration files in
supabase/migrations/ordrizzle/migrations/, and apply them in their recorded order. Use the Supabase CLI only for the Supabase migration layout. - Move the data. Restore the database export, which includes user accounts.
- Configure sign-in. Enable each provider and update the redirect URLs.
- Copy storage files into the matching buckets.
- Set secrets and deploy server code. Function secrets, Edge Functions, and scheduled jobs. Replace the app connector and AI calls listed in the table below.
- Point a test deployment at the new backend through its environment variables, and leave the Lovable project unchanged.
- Verify on that deployment.
- Switch. Restore the final export, update
.envandsupabase/config.tomlin the Lovable project, and move traffic, as described under Complete a move away from Lovable.
What you’re responsible for
When your backend runs outside Lovable, you are responsible for the backend capabilities Lovable previously managed, including:- Database availability, scaling, and backups
- Backend monitoring and incident response
- Row-level security configuration and maintenance
- Authentication provider configuration
- OAuth credentials, redirect URLs, and secret rotation
- Backend environment variables and configuration
- Security scanning for misconfigurations and exposed secrets
- Compliance posture of your backend infrastructure
What migrates and how
Manual migration using the Supabase dashboard
Manual migration using the Supabase dashboard
Create a new Supabase project
- Go to supabase.com → New project
- Choose your organization and fill in:
- Project name: any name
- Database password: strong password
- Region: closest to your users
- Click Create new project and wait around 2 minutes for the project to initialize.
- From your new Supabase project settings, save these values:
- Project ID
- Public API Key (anon key)
- Project URL:
https://[your-project-id].supabase.co
Run database migrations
-
Supabase migrations:
supabase/migrations/. Run them in chronological order based on the timestamp in the filename, from earliest to latest. For example: -
Drizzle migrations:
drizzle/migrations/. Follow the migration order recorded indrizzle/migrations/meta/_journal.json. These files do not run throughsupabase db push.
- Copy the entire SQL content from each migration file.
- Paste it into the SQL editor in your new Supabase project.
- Run and wait for success message.
Export and import your database data
- Go to More → Cloud → Overview → Advanced settings.
- In Export project data, click Export data.
- In the Database card, click Export, then click Start export to confirm.
- Lovable emails you when the export is ready. The export is saved to your project’s Cloud storage, so download it from More → Cloud → Storage.
.backup archive with zstd compression. If the storage download wraps it in a .zip file, extract that first. The archive contains schema and data, including managed schemas such as auth. It is not a SQL file you can paste into the SQL editor.- Install PostgreSQL client tools with zstd support. A
pg_restorebuild without that support can list the archive but cannot restore its data. - Inspect the archive with
pg_restore --list your-export.backup. Use PostgreSQL’s selective restore options to choose the objects and data to restore. - Plan the restore for your initialized destination using Supabase’s backup and restore guidance. Its plain SQL examples are not commands for this custom-format archive. Account for existing managed schemas, roles, extensions, and the application schema you already created. If migrations inserted seed records, reconcile them before importing those same records from the export.
- Restore the selected data with
pg_restore, including the sequence values needed for new records. Verify tables, records, relationships, and record creation before switching your app to the new backend.
Reconfigure authentication
- In your new Supabase project, go to Authentication → Sign In / Providers.
- Enable and configure each provider.
- In your OAuth app settings (for example, Google Console, GitHub), update redirect URLs to use your new Supabase project URL.
Migrate storage files
- In your Lovable project, go to More → Cloud → Storage.
- Download files from your storage buckets.
- In Supabase, go to Storage and upload files to corresponding buckets.
Set function secrets
- In your new Supabase project, open the Edge Function Secrets page in the dashboard.
- Add each secret your functions read.
supabase secrets set NAME=value sets one secret, and supabase secrets set --env-file <file> sets several from a file.Deploy Edge Functions and recreate scheduled jobs
supabase/functions/. After you link the new project with the Supabase CLI (see the CLI accordion below), deploy every Edge Function:cron.schedule SQL, and schedules that call your app with a scheduler of your own. Verify their destination URLs and credentials, and check that they ran after their first scheduled time. Coordinate enabling them with the old backend so both copies do not run the same job.App connector and AI feature calls keep running through Lovable until you replace them. See What migrates and how.Point a test deployment at the new backend
VITE_SUPABASE_URL,VITE_SUPABASE_PUBLISHABLE_KEY, andVITE_SUPABASE_PROJECT_IDfor the browser. Both React + Vite and TanStack Start apps embed browser values at build time, so rebuild after setting them.SUPABASE_URL,SUPABASE_PUBLISHABLE_KEY, andSUPABASE_PROJECT_IDas well, for a TanStack Start app’s server code.
Verify everything works
- The app loads without errors
- You can create and read database records
- Sign-in works with a migrated account
- Storage uploads and downloads succeed
- Edge Functions respond, and scheduled jobs ran
Switch the Lovable project to the new backend
-
In your Lovable project, go to Code and open
.env. Replace the old values with the new project’s values:A TanStack Start project also hasSUPABASE_PROJECT_ID,SUPABASE_PUBLISHABLE_KEY, andSUPABASE_URLin the same file for its server code. Update those to the same new values. -
Open
supabase/config.tomland replace the old project ID: - Save both files.
Push the schema and deploy functions with the Supabase CLI
Push the schema and deploy functions with the Supabase CLI
supabase/migrations/. For a project with drizzle/migrations/, apply its migrations as described in the dashboard walkthrough instead. Function deployment is separate and applies when the project has supabase/functions/.Link the new project and push the Supabase migrations. Drop npx if you installed with Homebrew:--linked, it compares against the local database instead of the new hosted project.After setting the function secrets from the walkthrough, deploy the Edge Functions:Host backend and data on your own infrastructure (Supabase example)
This option is intended for strict compliance, data residency, or infrastructure control requirements. You run the backend and database on infrastructure you operate. The most direct self-hosted path is self-hosted Supabase, which provides the authentication, storage, realtime, and edge function services that Lovable applications depend on. The production frontend can remain on Lovable or elsewhere. Lovable can still be used for development, or development can fully transition to other tools. Running only a standalone PostgreSQL database is not sufficient unless you implement equivalent authentication, storage, realtime, and edge services.What you’re responsible for
When the backend runs on infrastructure you operate, you are responsible for the backend capabilities Lovable previously managed, including:- PostgreSQL operations, backups, and disaster recovery
- Authentication, storage, and realtime service availability and reliability
- Row-level security design and enforcement
- Applying security patches and managing version upgrades
- Edge function deployment and execution
- Performance tuning and scaling
- Monitoring, alerting, and incident response
- Compliance certification of your infrastructure
-
Deploy Supabase in your own infrastructure using Supabase’s official self-hosting with Docker guide.
You can ask Lovable to generate these Docker configurations. See Using Lovable to generate Docker deployments below.
- Configure PostgreSQL, authentication, storage, and required services.
-
Apply the migration files from your Lovable project (
supabase/migrations/ordrizzle/migrations/, depending on the project) in their recorded order to your self-hosted instance. -
Update your application environment variables to point at your self-hosted Supabase:
A TanStack Start project also reads
SUPABASE_URLandSUPABASE_PUBLISHABLE_KEYfor its server code. Set those to the same values.
Complete a move away from Lovable
When the app, its data, and its services all move, keep the existing app available while you prepare the replacement, and switch in this order:- Restore the data and test against it. Restore the database export and the storage files into the destination, point a test deployment at it, and run the checks under Verify before switching traffic with migrated accounts.
- Check for remaining calls to Lovable. Search the code for app connectors, AI features, and your built-in backend (Cloud) URL. Each of those still runs through Lovable until you replace it. Cloud usage, AI features, and connectors on the Managed by Lovable option keep using your workspace credits.
- Plan the final data changes. Records written after your export are not in it. For the final copy, pause writes from users, scheduled jobs, webhooks, and other integrations, request the final export when the export cadence allows it (one export every 24 hours), copy any storage files changed since your last copy, restore, and then switch. Measure the export and restore times on your test run first, because they set the length of the pause. An app that cannot pause needs an incremental copy with a database tool of your own.
- Switch traffic. Move your custom domain to the new host, then unpublish the app on Lovable when you no longer want the
lovable.appaddress to serve it. - Retire the old services. Download and verify your database export and storage files first. Removing Lovable Cloud deletes the backend permanently, including exports saved to its storage. Then disconnect Git sync or delete the project when you no longer need it in Lovable.
Ask Lovable to prepare the deployment
Use this prompt as a starting point to ask Lovable to inspect the project and prepare the configuration for a host of your choice. Lovable cannot run or test the result outside its own preview. Check the suggested runtime version and server entry path against your actual build output, then verify the app on the new host before using the generated instructions for production.Using Lovable to generate Docker deployments
If you prefer a containerized deployment, you can prompt Lovable to generate Docker and Docker Compose configurations for your project. Lovable provides the generated file details, service ports, and run commands in the project chat. Below are the three supported patterns.Frontend only
Package only the React app as a static site served by Nginx. Use this when you only want to move your frontend. This pattern is for older React + Vite apps. A TanStack Start app needs a Node.js stage instead, as described under Deploy to a container or your own server. For example:Backend only (self-hosted Supabase)
Run the full Supabase stack locally without bundling the frontend. Use this when you want to develop the frontend separately or serve it from another host. For example:Full stack (frontend + self-hosted Supabase)
Bundle the frontend and a self-hosted Supabase stack in a single Docker Compose setup. Use this for fully self-contained deployments. For example:Manual configuration required for self-hosted Supabase
Lovable generates placeholder secrets that you must replace before use:- Generate a JWT secret:
openssl rand -base64 32 - Generate API keys using your JWT secret. Follow the Supabase self-hosting documentation for generating API keys.
- Replace the following values in
docker-compose.yml:JWT_SECRETPOSTGRES_PASSWORDANON_KEYSERVICE_ROLE_KEY
Limitations
- Lovable cannot run or test Docker builds. Verify them yourself.
- Lovable cannot generate real secrets. Replace the placeholders yourself.