# Lovable

Lovable is an AI coding and hosting platform for building full-stack apps. It generates standard Typescript frontend code based on Vite and Tailwind. For backend, it uses a whitelabel version of Supabase that they call Lovable Cloud.

Lovable app frontends are implemented in Typescript with React, Vite, React Router, Tailwind and shadcn. Write a `specific.hcl` with a `web` service to run this both locally and once deployed.

## Goal

Remove all dependencies on Lovable and Supabase / Lovable Cloud from the user's code and ensure the full system still works exactly like before.

## Frontend

Lovable frontends are served as purely static content, which we do not support on Specific and instead the static files must be served using a web server. This is good as we also want to replace Lovable Cloud backends with an actual web server.

For this, we are going to use the Hono web framework together with the `@hono/node-server` and `@hono/vite-dev-server` packages to make it work with the Vite frontend. Do the following:

1. Install packages: `npm install tsx hono @hono/node-server @hono/vite-dev-server`
2. Create a boilerplate Hono app in `src/server/index.ts`:

```ts
import { Hono } from "hono";

const app = new Hono();

// Implement any backend functionality as routes under `/api`
app.get("/api/hello", (c) => c.json({ message: "Hello from Hono!" }));

export default app;
```

3. Create a prod entrypoint in `src/server/prod.ts`:

```ts
import { serve } from "@hono/node-server";
import { serveStatic } from "@hono/node-server/serve-static";
import app from "./index";

// Serve frontend static files
app.use("/*", serveStatic({ root: "./dist" }));
app.get("*", serveStatic({ path: "./dist/index.html" }));

const port = Number(process.env.PORT ?? 3000);
serve({ fetch: app.fetch, port }, (info) => {
  console.log(`Server running on http://localhost:${info.port}`);
});
```

4. Add `start` command to `package.json` to run production server: `tsx src/server/prod.ts`
5. Update the existing `dev` command in `package.json` to: `vite --port $PORT`
5. Add plugin to `vite.config.ts` to run Hono during development:

```ts
// Add inside `plugins`
devServer({
    entry: "src/server/index.ts",
    // Only route /api/* through Hono; everything else stays with Vite (SPA + HMR)
    exclude: [/^(?!\/api(\/|$)).*/],
    injectClientScript: false,
}),
```

6. Finally, create a `specific.hcl` to run the app as a single service in both prod and dev:

```hcl
build "web" {
    base = "node"
    command = "npm run build"
}

service "web" {
    build = build.web
    command = "npm start"

    endpoint {
        public = true
    }

    dev {
        command = "npm run dev"
    }

    // Add any environment variables needed for secrets, configs and databases
    env = {
        PORT = port
    }
}
```

Make sure to run `specific dev` and check the logs to ensure the app starts as expected.

## Backend (database, authentication, edge functions)

Lovable Cloud backends are based on Supabase. Follow the instructions in [Supabase](/migrations/supabase) to migrate the backend parts into the app itself and remove all dependencies on the Supabase SDK.

Integrate the backend code with the web server that serves the frontend code so that they can be deployed as a single server. Use Hono for this with `src/server/index.ts` as the starting point. Here's the recommended stack:

- Hono for the backend API endpoints (served on `/api` for the same web server)
- Drizzle as the database ORM
- [Reshape](/postgres/reshape) to manage database schema migrations
- [Sync engine](/sync) instead of Supabase real-time. Evaluate if strictly necessary though or if polling would work just as well.

## Lovable AI

If the project uses Lovable AI and their gateway, switch away from it to using the LLM provider APIs directly (with new secrets for API keys). Here is the documentation for some different LLM API providers:

- Google / Gemini: https://ai.google.dev/gemini-api/docs
- Anthropic / Claude: https://platform.claude.com/docs/en/home
- OpenAI / ChatGPT: https://developers.openai.com/api/docs

## Data migration

There is no automated way of performing a data migration at the moment.