Deploying and hosting outside Lovable

1. 1

   Connect your Lovable project to GitHub.

   This is the first step for all external hosting options, as other platforms will deploy directly from your GitHub repository.

2. 2

   Decide if you want to host your frontend on a managed platform (like Netlify or Vercel), on your own infrastructure (like Docker containers or virtual machines), or both.

   Your choice depends on how much control you need and what kind of infrastructure you already use.

3. 3

   If using a managed platform, connect your GitHub repository to it, configure build settings (like `npm run build` and `dist` output), add Lovable environment variables (like `VITE_SUPABASE_URL` and `VITE_SUPABASE_PUBLISHABLE_KEY`), and set up Single Page Application (SPA) routing.

   This ensures your app builds correctly, connects to Lovable's backend if needed, and navigates properly on the new platform.

4. 4

   If using object storage with a Content Delivery Network (CDN), create a GitHub Actions workflow to build your app and upload the `dist/` output to your chosen cloud provider's storage, then configure SPA routing on the CDN.

   This automates the process of getting your built app to a high-performance, globally distributed hosting solution.

5. 5

   If self-hosting with Docker, create a `Dockerfile` and `nginx.conf` file in your project, build the Docker image with your Lovable environment variables, push it to a container registry, and deploy it using your container orchestration platform.

   This gives you maximum control over the runtime environment and allows deployment to Kubernetes, ECS, or similar systems.

6. 6

   If self-hosting on a virtual machine or static server, install dependencies, build the application with Lovable environment variables, upload the `dist/` output to your server, and configure your web server (like Nginx or Apache) for SPA routing and optionally TLS.

   This is for situations where you need to run your app on traditional servers you manage directly.

7. 7

   If your app uses Google Sign-In or other OAuth providers, update the allowed redirect URLs in your authentication provider's settings to include your new production domain.

   This is crucial for user authentication to work correctly after moving your app to a new domain.

I need to deploy my Lovable app's frontend outside of Lovable. Can you help me set up a GitHub Actions workflow to build my app and deploy it to a managed platform or my own infrastructure? I will provide the specific platform details and environment variables.

Managed platform

A service that handles all the technical details of running your app, like servers, updates, and security, so you don't have to.

Self-hosted infrastructure

Running your app on your own computers or cloud servers where you are responsible for setting up and maintaining everything.

Frontend

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

Backend

The part of your app that runs on a server, handling data storage, user accounts, and other logic that users don't directly see.

Deployment

The process of getting your app's code from your computer to the servers where it will run for users.

Hosting

The place where your app's files and code live and run, making it available to users.

CI/CD

Continuous Integration/Continuous Deployment – an automated process that builds, tests, and deploys your code whenever you make changes.

CDN

Content Delivery Network – a network of servers around the world that stores copies of your app's files and delivers them quickly to users based on their location.

SPA routing

Single Page Application routing – a way for web apps to change what's displayed on the screen without reloading the entire page, making it feel faster and smoother.

OAuth

Open Authorization – a standard that allows users to grant websites or applications access to their information on other sites (like Google or Facebook) without sharing their passwords.

Object storage

A way to store large amounts of unstructured data (like images, videos, or website files) in the cloud.

Container

A standardized package of software that includes everything needed to run an application: code, runtime, system tools, libraries, and settings. Docker is a popular tool for creating and managing containers.

Dockerfile

A text file that contains instructions for building a Docker container image.

Nginx

A popular piece of software that acts as a web server, serving web pages and handling incoming requests.

Virtual machine (VM)

A software-based computer that runs on a physical computer, acting like a separate machine with its own operating system.

TLS

Transport Layer Security – the technology that encrypts communication between your web browser and a website, ensuring privacy and data integrity (often seen as HTTPS).

OIDC

OpenID Connect – an authentication layer on top of OAuth 2.0, allowing applications to verify the identity of users based on the authentication performed by an authorization server.

• Lovable cannot monitor or debug production infrastructure it does not control.
• When hosting your production frontend outside Lovable, you become responsible for frontend deployment pipelines, environment variables, CDN behavior, uptime, logs, and preview environments for production branches.
• Do not rely on storage-level error page settings for SPA routing, as they return 404 status codes; instead, configure custom error responses or URL rewrite rules that return 200.
• Environment variables prefixed with `VITE_` are embedded at build time, not runtime; if you need to change them, you must rebuild the application or container image.