Publishing and Sharing

Get a public URL, set up a custom domain, export your code to GitHub, and understand what happens next.

The Moment It Becomes Real

Here is the scenario that every developer remembers from their first project:

You have built something. It works on your screen. But the only person who has seen it is you. You want to show a client, a colleague, or a mentor — but you are sitting in different cities.

Traditional software development requires a server, a deployment pipeline, environment variables, DNS records, and often a DevOps engineer just to share a preview. This can take days.

Lovable collapses this to 30 seconds.

Getting a Public URL

Every Lovable project automatically generates a public URL the moment it is created. You do not have to do anything to "publish" it in the traditional sense.

The URL looks like this: https://your-project-name.lovable.app

Or sometimes a variation with random characters: https://abc123xyz.lovable.app

To find your project's URL:

Look at the top of your Lovable editor. You will see a Share button or a Publish button (the terminology may vary). Clicking it shows you the URL and sometimes offers options like copying it to clipboard or opening it in a new tab.

You can also open the app directly by clicking the external link icon near the preview pane — this opens the app in a full browser tab at its public URL.

The public URL works immediately. Anyone with the link can open the app — no login required on their side. The app works on mobile, desktop, and any browser. Share it via WhatsApp, email, or just read the URL aloud.

What Your Client Sees at the URL

When you share the URL, your client opens it and sees the live app — exactly as it appears in your Lovable preview. They can interact with it fully:

Click buttons
Fill forms (if the app has forms)
See all the data (including what you have already added if Supabase is connected)
Navigate between pages if the app has multiple views

This is not a static screenshot. It is the running application. The client is using real software, and their interaction is real — if they add a record and Supabase is connected, that record is saved.

In the Lovable editor, look at the top area of the screen. You will find either:

A Share button (shows sharing options including the URL)
A Publish button (makes the app publicly accessible)
Both, serving different purposes

The exact interface depends on which version of Lovable you are using.

Copy the URL

Click the Share button and look for a copy icon next to the URL. Click it. The URL is now in your clipboard.

Paste it into a WhatsApp message, email, or wherever you need to share it.

Test It First

Before sharing with a client, open the URL yourself in a private/incognito browser window. This simulates what your client will see — without any of your editor session or login state affecting the view.

If the app looks right in that private window, it will look right for your client.

Setting Up a Custom Domain

The default .lovable.app URL works fine for prototypes and demos. But for anything you are presenting as more than a prototype — or if you want the URL to match your client's brand — you can connect a custom domain.

A custom domain turns: https://invoice-tracker-abc123.lovable.app

into: https://tracker.yourfirm.com (or whatever domain you control)

Upgrade If Required

Custom domain support may require a paid Lovable plan. Check your current plan in Lovable settings. If custom domains require an upgrade, evaluate whether this is necessary for the current project or if the default URL is acceptable.

Open Domain Settings

In Lovable, look for a Domains or Custom Domain option in your project settings. This is usually found in the settings menu (gear icon) for your project.

Enter Your Domain

Type in the domain you want to use. For example: app.mehta-associates.com

You need to own this domain — it has to be a domain your client controls through a domain registrar (like GoDaddy, Namecheap, or Google Domains).

Configure DNS Records

Lovable will give you DNS records to add to your domain's settings. These look like:

A CNAME record pointing your subdomain to Lovable's servers
Sometimes a TXT record for verification

You add these records in your domain registrar's DNS management panel. If your client owns the domain, you will need their login or their domain administrator's help.

DNS changes take anywhere from a few minutes to 48 hours to propagate globally, though they usually work within 30 minutes.

Verify the Connection

Once DNS has propagated, open your custom domain in a browser. You should see your Lovable app. Lovable usually handles SSL certificates (the padlock / HTTPS) automatically.

For training projects and client demos during the learning phase, the .lovable.app URL is perfectly sufficient. Custom domains are more relevant when you are handing a project over to a client and want it to feel fully professional and branded.

Downloading and Exporting the Code

This is one of Lovable's most underappreciated features, and one of the most important for this training program.

Lovable can export your entire project as real React code — the same code any developer would write.

This means:

Your app is not locked inside Lovable forever
The code can be opened in VS Code and modified manually or with Claude Code
A developer can continue work on it even if Lovable is not available
You learn by seeing real, production-quality code

How to Export

Find the Export / GitHub Option

In the Lovable editor, look for an Export button, a GitHub option, or a Download Code option. This is usually in the top menu or the project settings.

Choose Export to GitHub (Recommended)

The best way to export is directly to a GitHub repository. If you have a GitHub account (covered in the GitHub module), you can connect it to Lovable and push the code directly.

Lovable will create a new GitHub repository (or push to an existing one) with all the code files.

After export, you can find the repository in your GitHub account — just like any other project.

Or Download as ZIP

If you prefer, you can download the code as a ZIP file. Extract it on your computer and you will see a folder structure like a normal React project.

What the Exported Code Looks Like

When you open the exported code in VS Code, you will see a React project with a structure like this:

This is identical to the structure you would create if you started a React project from scratch following best practices. Lovable did not generate some unusual, proprietary format — it wrote standard React.

The learning value here is significant. Even if you built the app entirely in Lovable without touching code, you can now open the exported project, look at the component files, and see exactly how the UI was built. This is one of the fastest ways to develop an intuition for how React applications are structured.

Opening Exported Code in VS Code

Open VS Code.

Use File → Open Folder and navigate to the extracted project folder.

Open the terminal inside VS Code (View → Terminal).

Run npm install to install the project dependencies. This may take a minute.

Run npm run dev to start the development server locally.

Open http://localhost:5173 in your browser. You will see the same app running locally on your machine — now fully under your control.

From this point, you can use Claude Code to make changes, add new features, fix issues, or extend the app far beyond what Lovable's interface supports directly.

The Full Workflow: Lovable to Production

Putting it all together, here is the complete lifecycle of an app built this way:

Stage 1 — Prototype in Lovable (1–2 hours): Build the core screens. Connect Supabase. Get the data flowing. Share the URL with the client for feedback.

Stage 2 — Refine in Lovable (30 minutes–1 hour): Make changes based on client feedback. Iterate until the client confirms the concept is right.

Stage 3 — Export to GitHub: Once the concept is validated, export the code to a GitHub repository.

Stage 4 — Continue in VS Code with Claude Code: Open the project in VS Code. Use Claude Code to add complex features, refine the code quality, improve the styling, and prepare for production.

Stage 5 — Deploy via Vercel: Connect the GitHub repository to Vercel for continuous deployment. Every push to GitHub automatically deploys the latest version.

This workflow combines the speed of Lovable with the power of Claude Code and the reliability of a proper deployment pipeline.

Verification for this section: You have completed this section successfully if:

You have opened your project's public URL in a separate browser tab and confirmed it loads
You can find and copy the shareable URL from the Lovable Share button
You have located the Export or GitHub option in Lovable (you do not need to have completed the export yet — just found where it is)