Import GuidesImport from Lovable

How to Deploy Your Lovable.dev Project to the Web with Zeabur

This guide is the easiest way to take the code generated by Lovable.dev and turn it into a real, live website that you can share with friends or customers.

Overview

Lovable.dev is amazing for creating your app’s design and features, but to put it online, you need “hosting.” We strongly recommend Zeabur because it handles the technical heavy lifting for you. It takes your code and puts it on a live URL in just a few clicks.

The Workflow:

  • Create: Generate your app in Lovable.dev.
  • Refine: Save the code to your computer and check it with Cursor.
  • Deploy: Host it live on Zeabur.

📝 Important Note: This guide focuses on getting your website online (the Frontend). If your app needs to save user data or logins, that requires a Database. We will cover how to add a database in a separate, follow-up tutorial!

Prerequisites

  • A GitHub account.
  • Cursor installed on your computer.
  • A Zeabur account.
  • Node.js installed locally (Version 18+ recommended).

Migration Overview

This plan moves you from a “no-code” environment to a “pro-code” environment while keeping the AI assistance you love.

  • Source: Lovable (React + Vite + Tailwind).
  • Editor: Cursor / Windsurf / Antigravity
  • Host: Zeabur

Step 1: Sync Lovable to GitHub

Instead of a manual export, Lovable has a direct 2-way sync integration that creates the repository for you.

  1. Locate the GitHub Integration:

    • Open your project in the Lovable editor.
    • Look at the top-right header (to the left of the “Upgrade” and “Publish” buttons).
    • Click the GitHub icon (the cat silhouette).

    Sync Project with Lovable

  2. Initiate the Connection:

    • A dropdown will appear with the title “GitHub”.
    • Click the black button labeled “Connect GitHub”.

    Click connect github

  3. Link the Project:

    • A settings modal will open titled “Project Settings” or “Integrations”.
    • Under the “Project” section (where it says Not connected), click the “Connect Project” button.
    • Note: If you haven’t logged into GitHub through Lovable before, it may ask you to authorize your account first.

    Connect project with github

  4. Get Your Repository URL:

    • Once the sync is finished, a green notification will appear in the bottom right: “A GitHub Repository is now under your account…”
    • A modal titled “Clone” will appear in the center of the screen.
    • Copy the URL shown in the box (it will look like https://github.com/yourusername/project-name.git).

    Successfully create a new github repo

You are now done with Lovable. You have the URL needed to bring the code into Cursor.

Step 2: Setup Local Development in Cursor

Now you will bring the code to your local computer to edit it with Cursor.

  1. Install Cursor: Download and install it from cursor.com.
  2. Clone Your Repository:
    • Open Cursor.
    • Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows) to open the command palette.
    • Type Git: Clone and select it.
    • Paste your GitHub repository URL (e.g., https://github.com/yourname/my-lovable-app) and select a folder on your computer to save it.
  3. Install Dependencies:

    • Open the terminal in Cursor (Ctrl + ~ or Terminal > New Terminal).

    • Type the following command to install the libraries Lovable used:

      npm install
  4. Start the Local Server:

    • Run the app locally to make sure it works:

      npm run dev

    • Click the localhost link in the terminal to view your app.

Step 3: Verify Dependencies and Environment

  1. Install Dependencies: Lovable projects usually detect the package manager automatically. Check for a lock file (pnpm-lock.yaml, package-lock.json, or yarn.lock).

    # If using npm
npm install
 
# If using pnpm
pnpm install

  2. Environment Setup:

    • Locate the .env.example file (if it exists) and duplicate it to create a .env file.
    • Important: If your Lovable app used API keys (OpenAI, Supabase, etc.), you must manually add these keys to your local .env file. Lovable does not export your secrets to GitHub for security reasons.

  3. Local Test: Run the development server to ensure the app works locally.

    npm run dev

Step 4: Deploy with a Single Click

Now for the magic. With the extension installed, deploying your project is just a few clicks away.

  1. Click on the new Zeabur icon in the activity bar on the left.
  2. Click the “Deploy” button.

Your editor will then ask for permission to open a link in your browser. Click “Open”.

Click Deploy and Open .png

Step 5: Let the Zeabur AI Agent Handle the Rest

Once you’re redirected to Zeabur, the platform’s AI agent takes over. It analyzes your code to understand the project’s structure, dependencies, and build requirements.

The Zeabur agent will:

  • Recognize that you have a full-stack application (e.g., a React frontend and an Express backend).
  • Automatically configure the build and start commands.
  • Provision all necessary services.

Zeabur Agent Handle the rest.png

You’ll be prompted to select a project and a deployment region. After that, Zeabur handles everything else.

You can watch in real-time as your service builds and becomes fully operational. Zeabur even provides you with a live domain as soon as the deployment is successful.

Step 6 : Domain & Networking

  1. Click on your Service in Zeabur.
  2. Navigate to the Networking tab.
  3. Click Generate Domain (to get a .zeabur.app domain) or Custom Domain to connect your own.
  4. Visit the URL. Your Lovable application is now a fully deployed production app.

Step 7: Connect a Database (Supabase)

If your Lovable app allows users to log in, create accounts, or save data, it requires a database (usually Supabase).

Currently, you have successfully deployed the Frontend (the visual interface). To make the data and authentication features work, you need to connect the backend by adding your API keys to Zeabur’s Variable settings.

We have a dedicated guide to walk you through getting your Supabase keys and adding them to Zeabur:

👉 Follow the upcoming guide to create and connect Supabase on Zeabur (coming soon).

That’s it! You’ve successfully moved your project from a prototype on Lovable.dev to a live, production-ready application on Zeabur without writing a single line of configuration. This seamless workflow lets you focus on what matters most: building great software.

Import from ReplitImport from Bolt