Connect your Turbostarter (Next.js, React Native, Vite) app to Supabase in 5 minutes

When you spin up a new TurboStarter project – a starter kit for web apps, mobile apps, and browser extensions powered by Turborepo – one of the first questions is: where does my data live and how do I ship fast without fighting my backend?

Supabase answers that with a managed PostgreSQL platform – database, storage, and edge runtime – while TurboStarter gives you a production‑ready monorepo with Next.js, React Native, and Vite/WXT already wired together.

In this article, you’ll follow the same setup flow as our official Supabase recipe – just with a more opinionated, SEO‑friendly walkthrough. By the end, you’ll have one Supabase Postgres database and optional Supabase Storage + Edge Functions wired into your TurboStarter stack, ready to power web, mobile, and extension apps from a single source of truth.

TurboStarter complements Supabase perfectly:

• Monorepo by default – web, mobile, and extensions in one place.
• Shared database package – @turbostarter/db with Drizzle ORM so schema and migrations are defined once and reused everywhere.
• Production‑grade tooling – Turborepo, TypeScript, best‑practice configs, and CI‑ready structure.

You get the speed of a starter kit with the power of a real platform, without locking yourself into proprietary APIs. Let’s plug Supabase into TurboStarter in about five minutes.

What you’ll set up

In this guide you will:

• Create a Supabase project backed by managed Postgres.
• Point TurboStarter’s database at Supabase via DATABASE_URL.
• Run TurboStarter migrations so your full schema lives in Supabase.
• Use Supabase Storage as S3‑compatible storage for things like avatars, logos, and uploads.
• Optionally run your API on Supabase Edge Functions using Hono close to your data.
• Explore extra Supabase features (Auth, Realtime, Vector, Cron) that fit naturally into TurboStarter’s architecture.

Everything here follows the same structure as the Supabase recipe in your docs, so you can skim this post, follow along, and then dive into the reference documentation when you need more detail.

Supabase features at a glance

Before wiring anything up, it helps to understand what you’re getting from Supabase and how it pairs with TurboStarter’s monorepo.

Managed Postgres database

At the core of Supabase is a fully managed PostgreSQL database with automatic provisioning, backups, monitoring, and scaling. You keep the full power of Postgres – joins, constraints, indexes, transactions, extensions – while managing everything through a modern UI (database overview). TurboStarter plugs into this via @turbostarter/db and Drizzle, so your schema and migrations stay in Git while Supabase handles the heavy lifting of running Postgres in production.

Auth and Row Level Security

Supabase ships a complete authentication and authorization system on top of your database: email/password, magic links, OAuth providers (GitHub, Google, etc.), and SSO flows (auth overview). It integrates tightly with Postgres Row Level Security (RLS), letting you express rules like “users only see their own rows” directly in SQL. You can treat Supabase Auth as a dedicated identity provider, or combine it with TurboStarter’s existing auth patterns and user tables.

Auto‑generated APIs

Out of the box, Supabase can expose your tables via auto‑generated REST and GraphQL APIs (API guides). As you evolve your schema, these APIs update automatically, which is great for rapid prototyping or internal tools. In a TurboStarter project you can either lean on these generated APIs, or keep using your own @turbostarter/api routes and use Supabase strictly as your database and storage layer.

Storage for files and media

Supabase Storage gives you S3‑compatible object storage that is aware of your Postgres auth rules (storage docs). You can group files into buckets (avatars, documents, videos), secure them with RLS, and serve them through a CDN. Because TurboStarter already expects an S3‑style interface, plugging in Supabase Storage is mostly a matter of setting S3_ENDPOINT, bucket name, and access keys in .env.local.

Realtime powered by Postgres

Supabase Realtime listens to Postgres replication and streams inserts, updates, and deletes over websockets (realtime docs). Instead of polling, your apps can subscribe to table changes or custom channels and update UI instantly – ideal for dashboards, activity feeds, or collaborative experiences. With TurboStarter, you can enable Realtime on top of the same tables you manage via @turbostarter/db, without introducing a second realtime system.

Edge Functions and Cron

Supabase Edge Functions let you run serverless Deno functions close to your database and users (functions quickstart). They’re perfect for webhooks, custom business logic, or tasks that don’t belong in your frontend. Combined with Cron and pg_cron, you can schedule recurring jobs – for example nightly cleanups, report generation, or billing checks – all deployed alongside your database and accessible from your TurboStarter apps.

Vector and AI‑ready Postgres

With the pgvector extension and Supabase’s Vector tooling, you can store embeddings directly in Postgres and run similarity search queries. That means you can build AI‑powered features – recommendations, semantic search, RAG pipelines – without standing up a separate vector database. TurboStarter’s schema and migrations can define vector columns like any other field, so AI features live in the same repository and workflows as the rest of your data model.

Supabase Studio and CLI

Finally, Supabase includes Supabase Studio, a browser‑based dashboard for browsing tables, editing data, running SQL, inspecting logs, and managing auth, storage, and functions (architecture docs). The Supabase CLI complements this with local development, migrations, and function deployment commands. Together they give your TurboStarter team a single pane of glass for everything running in your Supabase project.

Prerequisites

Before you start, make sure you have:

If you’re already familiar with our core database docs:

• Database overview
• Migrations
• Database client

…you’re in a perfect place to connect TurboStarter to Supabase.

Connect TurboStarter to Supabase in 5 minutes

Let’s go step‑by‑step through wiring a fresh TurboStarter monorepo to a new Supabase project. This is based closely on the official Supabase recipe, adapted for a blog format and SEO.

DATABASE_URL="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"

pnpm with-env pnpm --filter @turbostarter/db db:migrate

pnpm with-env pnpm turbo db:seed

S3_REGION="us-east-1"
S3_BUCKET="avatars"
S3_ENDPOINT="https://[YOUR-PROJECT-REF].supabase.co/storage/v1/s3"
S3_ACCESS_KEY_ID="your-access-key-id"
S3_SECRET_ACCESS_KEY="your-secret-access-key"

supabase functions new hono-backend

import { Hono } from "jsr:@hono/hono";

// change this to your function name
const functionName = "hono-backend";
const app = new Hono().basePath(`/${functionName}`);

app.get("/hello", (c) => c.text("Hello from hono-server!"));

Deno.serve(app.fetch);

Optional: talk directly to Supabase from your apps

Everything above works with TurboStarter’s existing database abstractions – you don’t have to add any Supabase SDKs to ship a production‑ready app backed by Supabase.

If you do want to integrate Supabase more deeply, you have options:

• Call Supabase REST endpoints from your Next.js, React Native, or extension frontends.
• Use the official JavaScript client in places where it makes sense (for example, for auth or realtime in a specific app).

Here’s a minimal example of the kind of query you might run once a client is configured (see the Supabase docs for full setup details):

// Example shape only – not part of TurboStarter's core setup
const { data, error } = await supabase.from("todos").select("*");

Or, for a simple REST call:

await fetch(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/todos`, {
  headers: {
    apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  },
});

These are optional enhancements on top of the core “Drizzle + Supabase Postgres” architecture described above.

Production best practices for Supabase + TurboStarter

To get a production‑grade setup, keep these points in mind:

• Environment variables:
  • Keep secrets (service role keys, database passwords) outside of the client bundle.
  • Use .env.local in development and environment variables in your hosting provider for production.
• Row Level Security:
  • Turn on RLS for user‑facing tables.
  • Start from Supabase’s RLS examples and adapt them to your TurboStarter schema.
• Connection pooling:
  • Supabase’s connection strings can include pgbouncer and connection_limit defaults.
  • This is important when you run TurboStarter across multiple server instances or edge regions.
• Monitoring and logs:
  • Use Supabase’s dashboard to monitor slow queries, function errors, and auth issues.
  • Pair it with your TurboStarter logging/observability setup for a complete view of your system.

The combination of Supabase’s platform tools and TurboStarter’s structure lets you move from prototype to production without rewriting your backend – and if you ever start a new project, you can spin it up in seconds with TurboStarter and reuse the same patterns.

Deploy your Supabase‑powered TurboStarter stack

Once your stack is integrated, deployment is straightforward:

• Use our guide on self‑hosting your Next.js Turborepo app with Docker in 5 minutes.
• Pair it with Supabase’s managed Postgres and Storage for a fully managed backend.
• Optimize builds with Turbopack and our advanced Turbo CLI techniques.

You now have a modern, scalable, Supabase‑backed TurboStarter app that runs across web, mobile, and extensions with a single source of truth. Explore more patterns in the Supabase docs and our own TurboStarter documentation to keep leveling up your stack – or start your next idea with TurboStarter and reuse everything you learned here.