10 Ways to Move Your Lovable Website to Free Hosting

10 Ways to Move Your Lovable Website to Free Hosting

If you've built a website using Lovable's AI platform, you might be looking for alternatives to Lovable hosting—especially given the recent issues with Lovable 2.0. Whether you're looking to migrate due to reliability concerns, need more control over your deployment, or simply want to explore other options, this complete migration guide shows you how to move your Lovable project to enterprise-grade hosting platforms—all for free.

In this comprehensive guide, I'll walk you through 10 hosting options for your Lovable-generated website: Cloudflare Workers, Firebase Hosting, Vercel, Netlify, GitHub Pages, Render, Railway, Fly.io, AWS Amplify, and DigitalOcean. Most offer generous free tiers—though some have changed their pricing in 2025 (I've noted the changes throughout).

Table of Contents: 10 Free Lovable Hosting Alternatives

Getting Started:

The 10 Free Hosting Options:

  1. Cloudflare Workers – Best for edge computing, unlimited bandwidth
  2. Firebase Hosting – Best for Google/Firebase ecosystem
  3. Vercel – Best developer experience, easiest setup
  4. Netlify – Best for instant deploys and rollbacks
  5. GitHub Pages – Best for simple sites, zero config
  6. Render – Best for modern app development
  7. Railway – Best for apps needing databases
  8. Fly.io – Best for global edge deployment ⚠️ (no free tier)
  9. AWS Amplify – Best for AWS ecosystem integration
  10. DigitalOcean App Platform – Best for DO users

Guides & Resources:

How to Export Your Lovable Project

Before you can migrate to any hosting platform, you need to export your Lovable project. Here's the complete process:

Step-by-Step Export Instructions

  1. Open your Lovable project in the Lovable dashboard
  2. Navigate to project settings (gear icon or menu)
  3. Look for "Export" or "Download" option in the project menu
  4. Select "Download as ZIP" to get all your project files
  5. Extract the ZIP file to a local folder on your computer

What's Included in Your Export

When you export a Lovable project, you typically receive:

  • Source code: React/TypeScript files with all your components
  • Configuration files: package.json, vite.config.js, etc.
  • Static assets: Images, fonts, and other media
  • Styling: CSS files or Tailwind configuration
  • Dependencies list: Everything needed to rebuild the project

Verifying Your Export

After exporting, test that your project runs locally:

# Navigate to your exported project
cd your-lovable-project

# Install dependencies
npm install

# Start the development server
npm run dev

If your project runs locally, you're ready to deploy to any of the hosting platforms below.

Why Move Away from Lovable Hosting?

Before diving into the alternatives, let's consider why you might want to move:

  • More reliable infrastructure: Enterprise-grade hosting platforms with global CDNs
  • Better performance: Faster load times and improved user experience
  • Custom domains: Easy setup with free SSL certificates
  • Advanced features: Analytics, A/B testing, and more sophisticated deployment options
  • Independence: Protection from Lovable platform changes or outages

Benefits of Using Free Hosting Platforms

Migrating from Lovable hosting to dedicated platforms like Cloudflare, Vercel, or Firebase gives you significant advantages:

Benefit What You Get
Global CDN Your site loads fast worldwide from 200+ edge locations
99.99% Uptime Enterprise-grade reliability vs. startup infrastructure
Free SSL Automatic HTTPS with zero configuration
Unlimited Scaling Handle traffic spikes without manual intervention
Version Control Git-based deployments with rollback capability
Preview Deployments Test changes on unique URLs before going live
Analytics Built-in traffic and performance monitoring
Custom Domains Use your own domain with simple DNS setup

These platforms serve billions of requests daily for companies like Shopify, The Washington Post, and Discord—all available on their free tiers for your Lovable project.

Option 1: Cloudflare Workers

Cloudflare Workers is an excellent choice for hosting static and dynamic websites with edge computing capabilities and a generous free tier.

What You Get for Free:

  • 100,000 requests per day
  • Unlimited bandwidth
  • Sub-millisecond global response times
  • Custom domains with free SSL
  • Global CDN across 300+ locations
  • Built-in KV storage (1GB free)

Migration Steps:

  1. Export your Lovable project:

    • In Lovable, go to your project settings
    • Click on "Export" or "Download" (usually found in the project menu)
    • Select "Download as ZIP" to get all your project files

  2. Install Wrangler CLI:

    # Install Wrangler globally
npm install -g wrangler

# Login to Cloudflare
wrangler login

  3. Initialize your Workers project:

    # Navigate to your project directory
cd your-lovable-project

# Build your static files
npm run build

# Create wrangler.toml configuration
cat > wrangler.toml << EOF
name = "my-lovable-site"
main = "src/index.js"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"  # or ./build depending on your setup
EOF

  4. Create a Worker script to serve your site:

    mkdir -p src
cat > src/index.js << 'EOF'
import { getAssetFromKV } from '@cloudflare/kv-asset-handler'

export default {
  async fetch(request, env, ctx) {
    try {
      return await getAssetFromKV(
        {
          request,
          waitUntil: ctx.waitUntil.bind(ctx),
        },
        {
          ASSET_NAMESPACE: env.__STATIC_CONTENT,
          ASSET_MANIFEST: __STATIC_CONTENT_MANIFEST,
        }
      )
    } catch (e) {
      return new Response('Not found', { status: 404 })
    }
  },
}
EOF

  5. Install dependencies and deploy:

    # Install the KV asset handler
npm install @cloudflare/kv-asset-handler

# Deploy to Cloudflare Workers
wrangler deploy

  6. Set up your custom domain (optional):

    • In your Cloudflare dashboard, go to Workers & Pages
    • Select your Worker
    • Go to "Settings" > "Domains & Routes"
    • Click "Add Custom Domain"
    • Follow the instructions to add and verify your domain

Real-world Example:

// wrangler.toml - Configuration for your Lovable site
name = "my-lovable-app"
main = "src/index.js"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

# Optional: Add environment variables
[vars]
API_URL = "https://api.example.com"

Option 2: Firebase Hosting

Firebase Hosting is Google's solution for hosting web applications and static content, with excellent performance and integration with other Firebase services.

What You Get for Free:

  • 10GB storage
  • 360MB/day data transfer
  • Custom domains with free SSL
  • Global CDN
  • Easy integration with Firebase Authentication and other Firebase services

Migration Steps:

  1. Export your Lovable project:

    • In Lovable, go to your project settings
    • Click on "Export" or "Download" (usually found in the project menu)
    • Select "Download as ZIP" to get all your project files

  2. Set up a Git repository:

    # Initialize a new Git repository
git init

# Add all files
git add .

# Commit the files
git commit -m "Initial commit from Lovable export"

# Create a new repository on GitHub/GitLab and push
git remote add origin <your-repository-url>
git push -u origin main

  3. Set up Firebase:

    • Create a Firebase account if you don't have one
    • Create a new Firebase project
    • Install Firebase CLI: 
      npm install -g firebase-tools

  4. Initialize Firebase in your project:

    # Login to Firebase
firebase login

# Initialize Firebase in your project directory
cd your-lovable-project
firebase init
    • Select "Hosting" when prompted
    • Choose your Firebase project
    • Specify your public directory (usually build, dist, or public)
    • Configure as a single-page app if applicable
    • Set up GitHub Actions for automatic deployment (optional)

  5. Deploy your site:

    # Build your project if needed
npm run build

# Deploy to Firebase
firebase deploy

  6. Set up your custom domain (optional):

    • In the Firebase console, go to Hosting
    • Click "Add custom domain"
    • Follow the instructions to verify and connect your domain

Handling Dynamic Content:

If your Lovable app uses backend functionality, you can use Firebase Functions:

// Example of a simple Firebase function
const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase Functions!");
});

Option 3: Vercel

Vercel is known for its excellent developer experience and is the company behind Next.js.

What You Get for Free:

  • Unlimited static sites
  • 100GB bandwidth per month
  • Custom domains with free SSL
  • Global CDN
  • Preview deployments for each Git branch
  • Serverless functions

Migration Steps:

  1. Export your Lovable project:

    • In Lovable, go to your project settings
    • Click on "Export" or "Download" (usually found in the project menu)
    • Select "Download as ZIP" to get all your project files

  2. Set up a Git repository:

    # Initialize a new Git repository
git init

# Add all files
git add .

# Commit the files
git commit -m "Initial commit from Lovable export"

# Create a new repository on GitHub/GitLab and push
git remote add origin <your-repository-url>
git push -u origin main

  3. Deploy to Vercel:

    • Sign up for a Vercel account
    • Install the Vercel CLI: 
      npm install -g vercel
    • Deploy your project: 
      cd your-lovable-project
vercel
    • Alternatively, connect your GitHub repository through the Vercel dashboard

  4. Configure build settings:

    • Vercel will auto-detect most frameworks
    • For custom configurations, create a vercel.json file: 
      {
  "builds": [
    { "src": "build/**", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/build/$1" }
  ]
}

  5. Set up your custom domain (optional):

    • In your Vercel project, go to "Settings" > "Domains"
    • Add your domain and follow the verification instructions

Serverless Functions Example:

// api/hello.js - A simple Vercel serverless function
export default function handler(request, response) {
  response.status(200).json({ message: 'Hello from Vercel Serverless Functions!' });
}

Option 4: Netlify

Netlify is beloved by developers for its instant deployments, instant rollbacks, and phenomenal developer experience.

What You Get for Free:

  • 100GB bandwidth per month
  • 20 builds per month (credit-based system as of Sept 2025)
  • Unlimited personal and commercial projects
  • Automatic HTTPS with custom domains
  • Instant rollbacks and deploy previews
  • Serverless functions (125,000 requests/month)
  • Form handling and split testing

Note (December 2025): Netlify moved to a credit-based pricing model. Free tier now includes 20 builds/month. Frequent deployers may need to upgrade or consider alternatives like Cloudflare or Vercel.

Migration Steps:

  1. Export your Lovable project:

    • In Lovable, go to your project settings
    • Click "Export" or "Download"
    • Download as ZIP

  2. Set up Git repository:

    # Extract and navigate to your project
cd your-lovable-project

# Initialize git
git init
git add .
git commit -m "Initial commit from Lovable"

# Push to GitHub/GitLab
git remote add origin <your-repo-url>
git push -u origin main

  3. Deploy to Netlify:

    • Sign up at Netlify
    • Click "Add new site" > "Import an existing project"
    • Connect your Git provider (GitHub, GitLab, Bitbucket)
    • Select your repository
    • Configure build settings:
      • Build command: npm run build
      • Publish directory: dist or build
    • Click "Deploy site"

  4. Configure custom domain (optional):

    • In site settings, go to "Domain management"
    • Click "Add custom domain"
    • Follow DNS configuration instructions

Netlify-Specific Features:

# netlify.toml - Advanced configuration
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

Option 5: GitHub Pages

GitHub Pages is the simplest option if your code is already on GitHub—zero configuration needed for basic sites.

What You Get for Free:

  • 1GB storage
  • 100GB bandwidth per month
  • Free username.github.io subdomain
  • Custom domain support with HTTPS
  • Built-in Jekyll support (or use any static site generator)

Migration Steps:

  1. Export and push to GitHub:

    # Initialize and push to GitHub
git init
git add .
git commit -m "Initial commit"

# Create repo on GitHub, then:
git remote add origin https://github.com/username/repo-name.git
git push -u origin main

  2. Enable GitHub Pages:

    • Go to your repository settings
    • Scroll to "Pages" section
    • Under "Source", select your branch (usually main)
    • Select folder: /root or /docs (where your built files are)
    • Click "Save"

  3. For build step sites (React, Vue, etc):

    # Install gh-pages package
npm install --save-dev gh-pages
    // Add to package.json
{
  "homepage": "https://username.github.io/repo-name",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}
    # Deploy
npm run deploy

  4. Custom domain:

    • Add a CNAME file to your repo root with your domain
    • Configure DNS with your domain registrar
    • Enable "Enforce HTTPS" in GitHub Pages settings

Option 6: Render

Render combines simplicity with power—great for static sites and apps with backends.

What You Get for Free:

  • Unlimited static sites
  • 100GB bandwidth per month
  • Global CDN
  • Automatic HTTPS
  • Custom domains
  • Continuous deployment from Git

Migration Steps:

  1. Export and push to Git:

    git init
git add .
git commit -m "Initial Lovable export"
git push -u origin main

  2. Deploy to Render:

    • Sign up at Render
    • Click "New" > "Static Site"
    • Connect your Git provider
    • Select your repository
    • Configure:
      • Build Command: npm run build
      • Publish Directory: dist or build
    • Click "Create Static Site"

  3. Custom domain:

    • In your site dashboard, go to "Settings"
    • Add custom domain
    • Configure DNS as instructed

Render Configuration:

# render.yaml - Infrastructure as code
services:
  - type: web
    name: my-lovable-site
    env: static
    buildCommand: npm run build
    staticPublishPath: dist
    routes:
      - type: rewrite
        source: /*
        destination: /index.html

Option 7: Railway

Railway shines when you need databases, cron jobs, or multiple services—perfect for apps that grew beyond static.

What You Get for Free:

  • One-time $5 trial credit (expires after 30 days)
  • After trial: $1/month free credit on Hobby plan ($5/month subscription)
  • One-click PostgreSQL, MySQL, Redis
  • Automatic HTTPS
  • Preview deployments
  • Environment variables
  • Multiple services per project

Note (December 2025): Railway changed their pricing model. New users get a one-time $5 trial that expires after 30 days. After that, the Hobby plan costs $5/month but includes $1/month in free usage credits. Best suited for apps that need databases or backend services.

Migration Steps:

  1. Install Railway CLI:

    npm install -g @railway/cli
railway login

  2. Initialize project:

    cd your-lovable-project
railway init

  3. Configure for static site:

    # Add to package.json
{
  "scripts": {
    "build": "vite build",
    "serve": "npx serve -s dist -l 3000"
  }
}

  4. Deploy:

    railway up

  5. Custom domain:

    • In Railway dashboard, go to your service
    • Click "Settings" > "Domains"
    • Add custom domain and configure DNS

Railway with Database Example:

// If your Lovable app needs a database
// Railway makes it dead simple

// Add PostgreSQL service in Railway dashboard
// Railway automatically provides DATABASE_URL

import { Pool } from 'pg'

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: { rejectUnauthorized: false }
})

Option 8: Fly.io

Fly.io runs your app on servers close to your users—true edge deployment with impressive global performance.

⚠️ Important (December 2025): Fly.io has discontinued their free tier for new users. New accounts now receive only a 2-hour trial. However, if you created an account before the change, your free allowances may still apply. Consider Cloudflare Workers or Render for free edge hosting instead.

What You Get (Trial/Legacy Free Tier):

  • 2-hour trial for new users
  • Legacy accounts: 3 shared-cpu VMs with 256MB RAM each
  • Legacy accounts: 160GB outbound data transfer
  • Automatic HTTPS
  • Global edge network (30+ regions)
  • Built-in load balancing

Migration Steps:

  1. Install flyctl CLI:

    # macOS/Linux
curl -L https://fly.io/install.sh | sh

# Windows
iwr https://fly.io/install.ps1 -useb | iex

  2. Sign up and authenticate:

    fly auth signup
# or
fly auth login

  3. Initialize your app:

    cd your-lovable-project
fly launch

    Follow the prompts to:

    • Choose app name
    • Select region
    • Skip PostgreSQL (unless needed)

  4. Configure static site:

    # Dockerfile (created by fly launch, modify as needed)
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
    # nginx.conf
events {
  worker_connections 1024;
}

http {
  include /etc/nginx/mime.types;

  server {
    listen 8080;
    root /usr/share/nginx/html;
    index index.html;

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

  5. Deploy:

    fly deploy

  6. Custom domain:

    fly certs create yourdomain.com
fly certs show yourdomain.com

Option 9: AWS Amplify

If you're in the AWS ecosystem or need AWS service integrations, Amplify is your best bet.

What You Get for Free:

  • 1,000 build minutes per month
  • 1GB served per month (data transfer out)
  • 5GB storage
  • Custom domains with HTTPS
  • Password-protected branches
  • Integration with AWS services

Note: AWS Amplify's free tier is more limited than some alternatives—1GB served monthly may not be enough for high-traffic sites. Best for AWS ecosystem users or low-traffic applications.

Migration Steps:

  1. Export your project:

    # Standard Git setup
git init
git add .
git commit -m "Lovable export"
git push -u origin main

  2. Deploy via Amplify Console:

    • Open AWS Amplify Console
    • Click "New app" > "Host web app"
    • Connect your Git provider
    • Select repository and branch
    • Configure build settings: 
      version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
    • Click "Save and deploy"

  3. Custom domain:

    • In app settings, choose "Domain management"
    • Add domain
    • Follow Route 53 or external DNS configuration

AWS Integration Example:

// Easy integration with AWS services
import { Amplify, API } from 'aws-amplify'

Amplify.configure({
  API: {
    endpoints: [
      {
        name: "MyAPI",
        endpoint: process.env.REACT_APP_API_URL
      }
    ]
  }
})

Option 10: DigitalOcean App Platform

DigitalOcean brings its reliable infrastructure to a modern PaaS experience—great if you're familiar with DO.

What You Get for Free:

  • 3 static sites
  • 1GB outbound bandwidth per app/month
  • Automatic HTTPS
  • Custom domains
  • GitHub/GitLab integration
  • Easy scaling path to paid tiers

Note: DigitalOcean's free tier has limited bandwidth (1GB per app). For high-traffic static sites, consider Cloudflare Workers, Vercel, or Netlify which offer 100GB+ free bandwidth.

Migration Steps:

  1. Push to Git:

    git init
git add .
git commit -m "Lovable project"
git push -u origin main

  2. Create App:

    • Log into DigitalOcean
    • Click "Create" > "Apps"
    • Connect your Git source
    • Select repository and branch
    • DigitalOcean auto-detects build settings
    • Modify if needed:
      • Build Command: npm run build
      • Output Directory: dist
    • Click "Next" through review
    • Launch app

  3. Custom domain:

    • In app settings, go to "Settings" tab
    • Click "Domains"
    • Add your domain
    • Update DNS records as shown

App Platform Configuration:

# .do/app.yaml - Optional: commit this for consistent deploys
name: my-lovable-site
services:
  - name: web
    github:
      repo: username/repo-name
      branch: main
      deploy_on_push: true
    build_command: npm run build
    output_dir: dist
    routes:
      - path: /
    static_sites:
      - name: site
        build_command: npm run build
        output_dir: dist

Comparing All 10 Options

Platform Best For Free Bandwidth Custom Domain Serverless Notes
Cloudflare Workers Edge computing Unlimited ✅ ✅ (Built-in) Best overall free tier
Firebase Hosting Firebase ecosystem 360MB/day ✅ ✅ (Cloud Functions) Great for Google integration
Vercel Best DX, Next.js 100GB/month ✅ ✅ Easiest setup
Netlify Instant deploys 100GB/month ✅ ✅ (125k/mo) 20 builds/month limit
GitHub Pages Simple sites 100GB/month ✅ ❌ No build step support
Render Modern apps 100GB/month ✅ ✅ (paid) Good scaling path
Railway Backend needs Trial only ✅ ✅ $5 one-time trial credit
Fly.io Global edge Legacy only ✅ ✅ No free tier for new users
AWS Amplify AWS ecosystem 1GB/month ✅ ✅ Limited bandwidth
DigitalOcean DO users 1GB/app ✅ ✅ (paid) Limited bandwidth

Which Platform Should You Choose?

Choose Cloudflare Workers if: You want unlimited bandwidth and true edge computing with 100,000 free requests/day.

Choose Firebase if: You need deep integration with Firebase Auth, Firestore, or other Google services.

Choose Vercel if: You want the easiest setup with the best developer experience—perfect for beginners.

Choose Netlify if: You want instant deploys, rollbacks, and built-in form handling.

Choose GitHub Pages if: Your code is already on GitHub and you want zero-configuration hosting.

Choose Render if: You want a modern, clean interface with room to grow into backend services.

Choose Railway if: You need databases, cron jobs, or multiple interconnected services.

Choose Fly.io if: Global performance matters and you want your app running close to users worldwide. Note: Free tier discontinued for new users—consider Cloudflare Workers instead.

Choose AWS Amplify if: You're already using AWS services or need enterprise-grade AWS integration.

Choose DigitalOcean if: You're familiar with DO and want a reliable PaaS from a trusted provider.

Website Migration Checklist

Before you start migrating your Lovable website, use this checklist to ensure a smooth transition:

Pre-Migration

  • Export your complete Lovable project (Download as ZIP from project settings)
  • Document current functionality (List all features, API integrations, database connections)
  • Identify dependencies (Note all external services, APIs, and third-party integrations)
  • Backup your data (Export any databases or user-generated content)
  • List environment variables (Document all API keys and configuration)
  • Review custom domain settings (Note your current DNS configuration)
  • Test locally (Ensure your exported project runs on your local machine)

During Migration

  • Set up Git repository (Initialize version control for your code)
  • Choose hosting platform (Cloudflare, Vercel, or Firebase based on needs)
  • Configure build settings (Set build command and output directory)
  • Add environment variables (Securely add API keys to hosting platform)
  • Deploy to staging (Test on temporary URL before going live)
  • Test all functionality (Verify forms, API calls, authentication work)
  • Check performance (Use Lighthouse or similar tools)

Post-Migration

  • Update DNS records (Point domain to new hosting)
  • Verify SSL certificate (Ensure HTTPS is working)
  • Test from multiple devices (Check mobile, tablet, desktop)
  • Update analytics (Reconnect Google Analytics or other tracking)
  • Monitor for errors (Check hosting dashboard for 404s or errors)
  • Inform users (If applicable, notify users of any changes)
  • Keep old hosting active (Maintain for 7-14 days as backup)

Migrating Without Downtime

One of the biggest concerns when moving hosting providers is avoiding downtime. Here's how to achieve a zero-downtime migration:

The DNS Cutover Strategy

  1. Deploy to new hosting first

    • Set up your site on Cloudflare/Vercel/Firebase completely
    • Test thoroughly using the temporary URL (e.g., your-site.vercel.app)
    • Don't change DNS yet

  2. Lower your TTL (Time To Live)

    • In your current DNS provider, reduce TTL to 300 seconds (5 minutes)
    • Wait 24-48 hours for this to propagate globally
    • This ensures fast DNS updates when you switch

  3. Prepare DNS records

    • Document exact DNS records from new hosting platform
    • For Cloudflare/Vercel: Usually A or CNAME records
    • Have these ready to paste immediately

  4. The switch (takes 2-5 minutes)

    # Example DNS records for Vercel
Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com
    • Update DNS records at your registrar
    • Change from old hosting to new hosting IPs/CNAMEs
    • Both sites are running, so no downtime occurs

  5. Monitor the propagation

    • Use whatsmydns.net to check global propagation
    • Most users will see new site within 5-30 minutes
    • Full global propagation takes 24-48 hours

  6. Verify everything works

    • Test site from different locations/networks
    • Check SSL certificate is active
    • Verify all pages and features work
    • Monitor error logs on new hosting

Rollback Plan

If something goes wrong:

  1. Keep old hosting active for at least 7 days after migration
  2. Revert DNS records to old hosting immediately if needed
  3. Document the issue before attempting another migration
  4. Fix problems on new hosting while old site runs
  5. Try again when ready

Testing Without Affecting Live Site

You can test your new hosting before switching DNS:

# Edit your local hosts file (requires admin/sudo)
# macOS/Linux: /etc/hosts
# Windows: C:\Windows\System32\drivers\etc\hosts

# Add this line (replace with your new hosting IP)
76.76.21.21 yourdomain.com

This makes only your computer see the new hosting, perfect for testing.

DNS Configuration Guide

Understanding DNS is crucial for a successful migration. Here's what you need to know:

Common DNS Record Types

A Record - Points your domain to an IPv4 address

Type: A
Name: @
Value: 76.76.21.21
TTL: 3600

AAAA Record - Points your domain to an IPv6 address

Type: AAAA
Name: @
Value: 2606:4700:3033::6815:2b52
TTL: 3600

CNAME Record - Points your subdomain to another domain

Type: CNAME
Name: www
Value: cname.vercel-dns.com
TTL: 3600

Platform-Specific DNS Settings

Cloudflare Workers:

  • Use Cloudflare's nameservers for full integration
  • A record: Provided in Workers dashboard
  • Automatic SSL/DDoS protection

Vercel:

  • A record: 76.76.21.21
  • CNAME for www: cname.vercel-dns.com
  • Automatic SSL provisioning

Firebase:

  • A record: Provided in Firebase console
  • TXT record for domain verification
  • Automatic SSL within 24 hours

Troubleshooting DNS Issues

Issue: "DNS not updating"

  • Solution: Clear your DNS cache, wait for TTL expiration, check global propagation

Issue: "SSL certificate error"

  • Solution: Wait 24 hours for certificate provisioning, verify DNS points to correct IP

Issue: "Some users see old site, some see new"

  • Solution: Normal during propagation, wait 48 hours for full global update

Troubleshooting Common Migration Issues

Beyond DNS problems, here are the most frequent issues when migrating from Lovable hosting and how to fix them:

Build Failures

Issue: "npm run build" fails with dependency errors

Error: Cannot find module 'react-scripts'
  • Solution: Run npm install first, check your Node.js version matches project requirements (usually Node 18+)

Issue: Build fails with TypeScript errors

  • Solution: Run npm run build -- --no-strict or fix the TypeScript errors shown in the output

Issue: Out of memory during build

  • Solution: Add NODE_OPTIONS=--max-old-space-size=4096 before your build command

Routing Issues (404 Errors)

Issue: Pages work on homepage but show 404 on refresh

  • Solution: Configure your hosting for single-page app (SPA) routing:

For Vercel, add to vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

For Cloudflare Workers, ensure your worker handles all routes returning index.html.

For Firebase, set "rewrites" in firebase.json:

{
  "hosting": {
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

Environment Variables Not Working

Issue: API calls fail after migration (worked in Lovable)

  • Solution: Add environment variables to your hosting platform's dashboard, not just .env files

Issue: Environment variables undefined in browser

  • Solution: Prefix variables with VITE_ for Vite projects or REACT_APP_ for Create React App

Images and Assets Not Loading

Issue: Images show broken/missing after deployment

  • Solution: Check that asset paths are relative (./images/) not absolute (/images/), or use the public folder correctly

Issue: Fonts not loading (CORS error)

  • Solution: Host fonts locally or ensure your CDN allows cross-origin requests

Performance Issues After Migration

Issue: Site slower than on Lovable hosting

  • Solution: Enable CDN/edge caching in your hosting dashboard, optimize images, enable compression

Handling Lovable-Specific Features

API Integrations

If your Lovable app uses API integrations, you will need to:

  1. Identify API endpoints: Look through your code for fetch/axios calls
  2. Secure API keys: Move API keys to environment variables
  3. Create serverless functions: For any backend logic

Example of moving an API call to a serverless function:

// Before (client-side)
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data', {
    headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
  });
  return response.json();
};

// After (serverless function)
// api/getData.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.get('https://api.example.com/data', {
      headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
    });
    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch data' });
  }
}

Database Connections

If your Lovable app uses a database:

  1. For Firebase: Use Firestore or Realtime Database
  2. For Cloudflare Workers: Connect to external databases directly from your Worker, or use Cloudflare D1 for serverless SQL
  3. For Vercel: Use serverless functions to connect to your database

Conclusion: Take Control of Your Lovable Hosting

Moving your Lovable website from Lovable hosting to a dedicated hosting platform gives you more control, better performance, and protection from platform-specific issues. Most options in this guide offer generous free tiers—though some have changed their pricing in 2025 (noted below).

My recommendations (Updated December 2025):

  • Easiest setup: Vercel or Netlify for instant deploys and best developer experience
  • Best performance: Cloudflare Workers (100,000 free requests/day, unlimited bandwidth)
  • Backend needs: Railway (trial) or Firebase for apps requiring databases
  • AWS ecosystem: AWS Amplify if you're already using AWS services (limited free bandwidth)
  • GitHub users: GitHub Pages for zero-configuration hosting
  • Modern simplicity: Render for static sites with room to grow

⚠️ Important changes in 2025: Fly.io no longer offers a free tier for new users. Railway changed to a one-time $5 trial credit. AWS Amplify and DigitalOcean have limited free bandwidth (1GB/month). For the best truly free hosting, stick with Cloudflare Workers, Vercel, Netlify, or Render.

Learn to Build Static Sites from Scratch

Want to understand what's happening under the hood? Build your own static website with vanilla JavaScript:

Each tutorial teaches core web development skills that transfer to any framework or platform—including understanding exactly what tools like Lovable generate for you.

Frequently Asked Questions

Does Lovable host my website for free? Yes, Lovable hosting is free, but many developers migrate to platforms like Cloudflare, Firebase, or Vercel for better performance, reliability, and more control over deployments.

Can I move my Lovable website to another hosting provider? Absolutely. You can easily migrate from Lovable hosting by exporting your project as a ZIP file, which you can then deploy to any hosting platform that supports Node.js applications.

Where should I host my Lovable website? For most use cases, we recommend Cloudflare Workers (unlimited bandwidth), Vercel (best developer experience), or Firebase (excellent backend integration). All three offer generous free tiers and are excellent alternatives to Lovable hosting.

How do I export my Lovable project? In Lovable, go to your project settings, click "Export" or "Download" from the project menu, and select "Download as ZIP" to get all your project files.

Will my Lovable app work on other hosting platforms? Yes! Lovable generates standard React/TypeScript applications that are compatible with any hosting platform that supports static sites or Node.js applications.

Fred

Fred

AUTHOR

Full-stack developer with 10+ years building production applications. I've been deploying to Cloudflare's edge network since Workers launched in 2017.