Host your Lovable app on Cloudflare

To make your Lovable application production-ready, hosting it on a fast, cost-effective, and easy-to-configure platform like Cloudflare is highly recommended.

This guide will walk you through deploying your Lovable application from scratch.

Prerequisites

Before getting started, make sure you have:

• A free Cloudflare account.
• A GitHub account.

Step 1: Connect Lovable to GitHub

First, you need to push your Lovable project to a GitHub repository.

1. Open your project in the Lovable editor.
2. Navigate to the bottom-left corner and open the menu.
3. Click on GitHub.
4. If your account isn't linked yet, click Connect.

Lovable will automatically generate a dedicated repository for your project. Take note of this repository name, as you will need it in the next step.

Step 2: Set Up Your Cloudflare Application

Now, you will connect that GitHub repository to Cloudflare.

1. Log in to your Cloudflare dashboard.
2. On the left sidebar, click on Compute, then select Workers & Pages.
3. Click the Create application button.
4. Select Continue with GitHub.
5. Choose your GitHub account and select the repository that Lovable just created for you.
6. Click Next to proceed to the configuration screen.

Step 3: Configure the Build Settings

Cloudflare will pre-fill most of the settings, but you need to make one crucial change.

1. Scroll down to the Build command field.
2. Change the default command to: npm run build
3. Click Deploy.

Cloudflare will now attempt to build your project. This can take up to two minutes.

Step 4: Fix the Initial Build Error (If Applicable)

Depending on your initial project setup, your first deployment attempt might fail with a build error related to bun install or missing lock files. Don't worry, this is a common issue and very easy to fix.

1. Head back to your Lovable project editor.
2. In the AI prompt bar, type the following command to clean up the configuration:

"remove bunfile and lockfile, keep npm and update package-lock.json to latest dependencies"

1. Hit enter. Lovable will instantly clean up the file configuration and push the fix directly to your GitHub repository.

Cloudflare will automatically detect this update and trigger a new, successful build.

Step 5: Add a Custom Domain

While you wait for the new build to complete, you can set up a custom domain for your application. (Note: This assumes your primary domain is already managed by Cloudflare.)

1. In your Cloudflare Worker project, click on the Domains tab.
2. Click Add Domain.
3. Type in your desired custom domain or subdomain (for example, superpowers.yourdomain.com).
4. Click Add domain.

Step 6: View Your Live Application

Once your build status in Cloudflare says "Success", your custom URL will be fully active.

1. Open a new browser tab.
2. Navigate to your custom domain.

Your Lovable application is now fully deployed, live, and running on Cloudflare!