Deploying and hosting outside Lovable

1. 1

   Decide which parts of your app you want to move outside Lovable.

   This guide covers different scenarios, so knowing your goal helps you pick the right path.

2. 2

   Check if your project uses 'TanStack Start' or 'older React + Vite' by looking at the 'package.json' file for '@tanstack/react-start' or asking Lovable in the project chat.

   The type of project determines how you build and deploy your app, as they require different hosting setups.

3. 3

   Get a copy of your project's code, either by connecting to a Git repository (like GitHub) or by downloading a snapshot as a .zip file.

   You need your app's code to deploy it to your own hosting environment.

4. 4

   If you have a TanStack Start app, follow the steps for 'Deploy a TanStack Start app' to a platform that runs server code or to a container/your own server.

   TanStack Start apps need a host that can run server-side code, not just static files.

5. 5

   If you have an older React + Vite app, follow the steps for 'Deploy an older React + Vite app' to a managed platform, object storage with a CDN, or your own infrastructure.

   Older React + Vite apps build to static files and can be served by any static host.

6. 6

   If you are moving your backend and database, follow the steps for 'Host backend and data on a managed provider' or 'on your own infrastructure'.

   This moves your app's data and server logic to an environment you control.

7. 7

   Before making your new deployment live, thoroughly test it to ensure everything works as expected.

   Verifying your deployment prevents issues for your users when you switch traffic.

8. 8

   If you are leaving Lovable entirely, follow the steps for 'Complete a move away from Lovable' after moving your frontend and backend.

   This ensures a clean and complete transition away from Lovable's services.

Which stack does this project use, older React + Vite or TanStack Start?

Hosting

Where your application lives and runs on the internet, like a home for your app.

Deployment

The process of getting your app's code built and put onto the 'hosting' location so people can use it.

Backend (Cloud)

The parts of your app that run on a server, like storing data, managing user accounts, and handling complex logic, which Lovable provides for you by default.

Frontend

The part of your app that users see and interact with in their web browser.

Static assets

Files that don't change, like images, videos, and basic web pages, that are delivered directly to the user's browser.

CDN (Content Delivery Network)

A network of servers around the world that store copies of your app's static files, making them load faster for users by delivering them from a server closer to them.

CI/CD pipeline

An automated process that builds, tests, and deploys your app's code whenever you make changes, ensuring new versions are released smoothly.

Object storage

A way to store large amounts of data, like files and images, in a scalable and cost-effective manner, often used for hosting static websites.

Container

A lightweight, standalone package that includes everything needed to run a piece of software, making it easy to move and run consistently across different environments.

Reverse proxy

A server that sits in front of your web server and forwards client requests to the correct server, often used for security, load balancing, and handling HTTPS.

SSL/TLS

Security protocols that encrypt communication between a user's browser and your website, ensuring privacy and data integrity (what makes your website 'HTTPS').

OAuth

An open standard for access delegation, commonly used for allowing users to sign in to your app using their accounts from other services like Google or Facebook.

• Not verifying your deployment thoroughly before switching traffic can lead to broken features or downtime for users.
• Forgetting to update sign-in redirect URLs in your authentication provider when moving your frontend can prevent users from logging in.
• Using object storage or a CDN alone for TanStack Start apps will not work, as these apps require a server to run their code.
• Relying on storage-level error page settings for SPA routing in CDN-backed hosting can result in 404 status codes instead of serving your app's index.html.
• Not setting environment variables correctly, especially those embedded at build time (like VITE_SUPABASE_URL), can cause your app to fail.