How to Move a Lovable Site to Hettie

Paste this page’s address into Claude Code or Codex and say “follow this guide and move my Lovable site to Hettie”. If you are the AI: follow the steps in order, keep the design, text and URLs exactly the same, add no features, and never change the person’s DNS. The Lovable site stays live and untouched until the last step.

1. Check the fit and get access

Moves: landing pages, company sites, portfolios, menus, event pages, sites with a contact form or a simple blog. Does not move: anything with logins, user accounts, payments inside the app or live data per user. If the site needs those, stop and tell the person.

You need:

• The code. In Lovable the person opens the project and connects GitHub; Lovable pushes the code to a repository. Clone it to lovable-site/.
• Hettie. The person signs in at https://app.hettie.dev. Sign in with npx hettie auth login. In a sandbox without a browser, the person creates a key under Account → Connect a Claude project and adds it as the environment variable HETTIE_KEY in their project or sandbox settings themselves. Never ask for the key in the chat. The hettie command is in early access: if npx hettie is not found, stop and tell the person. Add the chat connector https://hettie.dev/mcp as well if you want to manage leads, posts and domains from the chat.

2. Make an inventory

Read package.json, index.html, src/App.tsx, src/index.css and tailwind.config.ts, then write MIGRATION.md with:

• Every route in src/App.tsx (<Route path="…">) and its page component, including the 404 route.
• Every form: fields, validation (often react-hook-form and zod) and where it submits.
• Every Supabase call: grep -rn "supabase" src/, with what it reads or writes.
• Every image and file: public/, src/assets/, Supabase storage URLs.
• Interactive parts: menus, tabs, accordions, carousels, dialogs, toasts, animations.
• Fonts from index.html, and the theme variables in src/index.css (--background, --primary and so on, as HSL values).

3. Rebuild on Hettie

Run npx hettie new hettie-site and follow its CLAUDE.md.

• Theme: copy the :root variables from Lovable’s src/index.css into src/styles/global.css and use them as hsl(var(--primary)). Move theme.extend colors, fonts and radius from tailwind.config.ts into @theme (Hettie uses Tailwind 4). Check shadow, rounded, ring and blur sizes, which were renamed in Tailwind 4.
• Layout: header, footer, fonts, favicon and <head> meta go into src/layouts/Base.astro.
• Pages: one .astro file per route with the same path. / is src/pages/index.astro, the 404 route is src/pages/404.astro. Fixed lists like /services/:slug become src/pages/services/[slug].astro with getStaticPaths.
• JSX to Astro: className becomes class, <Link to> becomes <a href>, click handlers move into a <script>. Rebuild shadcn components (Button, Card, Badge) as plain HTML with the classes from src/components/ui/<name>.tsx. Use <details> for accordions and <dialog> for modals. Only if a component is too complex, add @astrojs/react and keep it as an island with client:visible.
• Remove: lovable-tagger, React Query and toast providers, src/integrations/supabase/, and all Supabase keys.
• Forms: <form method="post" action="/forms/<name>"> with the same field names, the honeypot <input type="text" name="_hp" hidden tabindex="-1" autocomplete="off">, and a message for ?sent=1 and ?error=check. Replace zod rules with required, type="email", minlength and pattern.
• Images: npx hettie media upload <file> for each photo (download Supabase storage files first), then use /_hettie/media/<file>.
• Changed URLs: add /old /new 301 lines to public/_redirects.

4. Compare and publish a test version

Run npx hettie dev and open every page next to the Lovable site at 375px and 1280px. Compare text, images, spacing, colors and interactions, and submit each form once. Fix every difference. Then npx hettie build and npx hettie publish --site <name> --message "Moved from Lovable". Give the person the test link.

Old form replies stay in Supabase. If the person wants them, they export the table as CSV from Supabase.

5. Switch the domain

Call add_domain (or npx hettie domain add www.<domain>). The person replaces Lovable’s records at their registrar with a CNAME from www to sites.xtwelve.io and the TXT record Hettie shows. Check with get_domains (or npx hettie domain status) until it is live with HTTPS. Then the person removes the domain in Lovable’s settings. Their Lovable project stays as it was, so switching back is always possible.