How to Publish Your Vibe Coding App: From Chat to Live URL

You built an app by talking to it. Now what?

The biggest friction point in the “Vibe Coding” revolution isn’t the building. It’s deployment.

You have a beautiful app running in the Lovable preview window. But how do you get it to `yourname.com`?

It is easier than you think.

In this guide, we will walk you through the “Export to Production” pipeline. No Docker knowledge required. No DevOps degree needed.

——

Why Most Vibe-Coded Apps Never Ship

Here’s the dirty secret: 90% of Lovable/Bolt projects die in the preview window.

Not because the app is bad. Because the builder hits the deployment wall and gives up.

The typical path looks like this: Build app in 20 minutes. Spend 6 hours trying to figure out Vercel environment variables. Give up. Never ship.

This guide eliminates that gap. You’ll have a live URL in under 30 minutes.

——

Prerequisites

1. A Lovable/Bolt Project: The app you built.

2. A GitHub Account: Free.

3. A Hostinger VPS: $6/mo (See our hosting guide).

You don’t need a credit card for GitHub. You don’t need a domain yet (we’ll cover that). You just need those three things.

——

Step 1: Export to GitHub

Every vibe coding tool has an “Export” button.

Do not download the ZIP file.

ZIP files are dead ends. You want a “Git Repo.”

1. In Lovable, click the Github icon in the top right.

2. Grant permission to your account.

3. Create a new repository (e.g., `my-first-app`).

4. Push the code.

Why GitHub?

Because proper hosting platforms “listen” to GitHub. When you push a change to Lovable, GitHub updates, and your server updates automatically. This is called CI/CD.

Without this, you’re manually uploading files via FTP like it’s 2005. Don’t do that.

——

Understanding the Two Deployment Paths

There are two ways to deploy a vibe-coded app: the Platform Method and the VPS Method.

Platform Method: Vercel, Netlify, Cloudflare Pages. Click a button, paste your GitHub URL, done. Free tier available. Limited control.

VPS Method: Hostinger VPS + Coolify. More setup. Full control. Better for apps that will eventually need a backend or database.

Most people start with Vercel. That’s fine for static apps.

But if your app uses Supabase, Firebase, or any backend service, you’ll want the VPS path. It scales better and costs less at volume.

This guide focuses on the VPS method because it’s more flexible. Once you understand it, the platform method is trivial.

——

Step 2: The “Pull” Method (For VPS Users)

If you followed our VPS guide, you have Coolify running.

1. Go to your Coolify dashboard.

2. Click “New Resource”.

3. Select “Public Repository”.

4. Paste your new GitHub URL (`github.com/you/my-first-app`).

5. Click “Continue”.

Coolify will detect that it is a React/Vite app.

Change Output Directory:

• Most Lovable apps build to `dist`.
• Ensure the “Publish Directory” setting says `dist`.

Click Deploy.

What just happened? Coolify cloned your GitHub repo onto your VPS, ran `npm install`, ran `npm run build`, and started serving the output folder.

This is the same process Vercel uses. You just own the infrastructure.

——

Step 3: Run It Forever

Your app is now building.

You will see logs scrolling. This is the server downloading your code and turning it into a website.

Wait for “Deployment Successful”.

If it fails, 99% of the time it is because of an “Environment Variable.”

Did you use Supabase?

You need to add your `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY` to the “Environment Variables” tab in Coolify.

Go to your Supabase project settings. Copy those two values. Paste them into Coolify’s Environment Variables section.

Redeploy. It will work.

Other common environment variables:

• `VITE_API_KEY` – If you’re calling OpenAI or Anthropic
• `VITE_FIREBASE_CONFIG` – For Firebase apps
• `VITE_STRIPE_PUBLIC_KEY` – For payment integrations

Rule of thumb: If your app talks to an external service, you need to add its credentials here.

——

Step 4: Point Your Domain

Right now, your app is on a weird IP address.

1. Go to Hostinger > DNS.

2. Add an A Record.

* Host: `@` (for root domain) or `app` (for subdomain).

* Points to: [Your VPS IP].

* TTL: 300 seconds.

Wait 5 minutes.

Don’t have a domain yet? Buy one from Hostinger for $10/year. Use a `.com` if you’re building a product. Use a `.app` if you want to sound technical.

Avoid `.io` domains unless you’re okay with the geopolitical risk. The British Indian Ocean Territory owns that TLD and it’s politically unstable.

Once DNS propagates, your app will load at `yourdomain.com`. No HTTPS yet. We fix that next.

——

Step 5: The Green Lock (SSL)

In Coolify:

1. Go to Settings > General.

2. In “Domains”, type `https://yourdomain.com`.

3. Click Save.

Coolify will automatically talk to “Let’s Encrypt” and get you a secure HTTPS certificate.

This takes 30 seconds. When it’s done, your site will have the green lock icon.

Why does this matter? Google penalizes non-HTTPS sites in search rankings. Users don’t trust sites without the lock. Payment processors require HTTPS.

It’s non-negotiable. Coolify makes it automatic.

——

Common Deploy Errors

1. “Build Failed”

Check your `package.json`. Make sure the `build` script exists. (Lovable handles this providing you didn’t delete it).

If you see “command not found: vite”, your dependencies didn’t install. Check the logs for npm errors.

2. White Screen of Death

This usually means your “Base Path” is wrong. Ensure your app expects to be at the root `/`.

Open your browser console. If you see 404 errors for `/assets/index.js`, your build path is misconfigured.

Go back to Coolify and verify the Publish Directory is set to `dist`.

3. “404 Not Found” on Refresh

This is a classic React router issue. You need to configure Nginx to redirect all traffic to `index.html`. (Coolify does this by default if you select “Static Site”).

If you manually configured Nginx, add this to your config:

`location / { try_files $uri $uri/ /index.html; }`

4. “Mixed Content” Warnings

Your site is HTTPS but calling HTTP APIs. Check your environment variables. Make sure all API URLs use `https://`.

5. Slow Load Times

Your VPS is probably in the wrong region. Hostinger lets you choose datacenter location. Pick the one closest to your users.

If you’re serving a global audience, you’ll eventually want a CDN. But for now, just pick US East or EU Central.

——

The Real Cost of Deployment

Let’s talk numbers.

Vercel Free Tier: 100GB bandwidth/month. After that, $20 per 100GB. If your app gets traction, you’ll hit this fast.

Hostinger VPS + Coolify: $6/month flat. Unlimited bandwidth (within reason). No surprise bills.

I’ve seen founders get $400 Vercel bills because their app went viral on Product Hunt. That doesn’t happen with a VPS.

The trade-off? You have to manage the server. But Coolify makes that a non-issue. Updates are automatic. Backups are built-in.

For most solo builders and small teams, the VPS path is cheaper and more predictable.

——

What About Backends?

Most vibe-coded apps start as frontend-only. That’s fine.

But eventually, you’ll need a backend. User accounts. Payment processing. Admin dashboards.

Here’s the path:

Phase 1: Static frontend (what you just deployed).

Phase 2: Add Supabase for auth and database (no backend code needed).

Phase 3: Add a Node.js API on the same VPS (Coolify can host this too).

Phase 4: Move to a proper backend framework like FastAPI or Express.

The beauty of the VPS approach? You can do all of this on the same $6/month server.

Vercel would charge you separately for frontend, backend, and database hosting. It adds up fast.

——

Automating Updates

Here’s where the GitHub integration pays off.

Go back to Lovable. Make a change to your app. Tell it “change the button color to blue.”

When you’re happy with the change, click the GitHub sync button again.

Coolify will detect the new commit and automatically redeploy. No manual steps.

This is the “CI/CD” everyone talks about. It sounds complex but it’s just: code change → GitHub → server updates.

You can now iterate on your app without touching the server. That’s the whole point.

——

When to Use Platform Hosting Instead

Vercel and Netlify aren’t bad. They’re just optimized for different use cases.

Use platform hosting if:

• You’re prototyping and don’t care about cost yet
• You need edge functions in 50+ global locations
• You’re building a content site with no backend
• You want zero server management

Use VPS hosting if:

• You’re building a product you plan to monetize
• You need predictable costs
• You want to run multiple apps on one server
• You’ll eventually need a custom backend

Most operators I know start on Vercel and migrate to VPS once they hit $50/month in hosting costs. You can skip that migration pain by starting on VPS.

——

Scaling Beyond the First App

Once you’ve shipped your first app, the second one is trivial.

Same process: Export to GitHub. Add to Coolify. Point a new domain (or subdomain). Deploy.

You can run 10+ apps on a single $6/month VPS. I’ve seen operators run 30+.

The limit isn’t the server. It’s your ability to maintain and market them.

This is where having a proper infrastructure matters. If you’re manually FTPing files, you can’t scale. If you’re using CI/CD, you can ship fast.

——

The Missing Piece: Client Management

You can now ship apps. But if you’re building for clients, you need a way to manage projects, invoices, and communication.

Most developers use a patchwork of tools: Notion for projects, Stripe for payments, email for communication. It’s messy.

There’s a better way. GoHighLevel consolidates all of this into one platform.

You get client portals, automated invoicing, project pipelines, and built-in CRM. It’s designed for agencies and operators who ship client work.

If you’re planning to turn your vibe coding skills into a service business, check out GoHighLevel here. It eliminates the operational overhead so you can focus on building.

——

Final Checklist

Before you call it done, verify these:

• ✓ App loads at your domain
• ✓ HTTPS is enabled (green lock)
• ✓ All pages load correctly (test navigation)
• ✓ Environment variables are set
• ✓ Mobile view works
• ✓ Console has no errors (F12 in browser)
• ✓ GitHub auto-deploy is working

If all seven are checked, you’re live.

——

What Happens Next

Congratulations. You are no longer just “using AI.” You are a Shipper.

Your app is live. Send the link to your friends.

Most people stop here. They ship once and move on.

The operators who win ship repeatedly. They build a portfolio of live projects. They learn what works. They iterate.

Your first app won’t be perfect. That’s fine. Ship it anyway.

The second one will be better. The tenth one will be great.

Next Step: Build a landing page to sell it.