mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Saxon FletcherandClaude Opus 5
b1d2efd99e
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature, docs. Part 2 of 6 in a stack that splits the library redesign into reviewable pieces. ## What is the current behavior? The library documents individual blocks. Nothing answers "I have no project yet" — a reader who wants a working app has to assemble one from block guides and figure out the scaffolding themselves. ## What is the new behavior? Four starter guides under `/docs/starters`, each starting from an empty directory and ending with a running app on Supabase: - **Next.js starter** — composes the library's own password-based auth block. - **SaaS starter** — the community subscription-payments template, with Stripe setup. - **AI chat app** — the community Vercel AI SDK template. - **Flutter starter** — the user-management example, with profiles and avatar uploads. They reuse the existing doc route, so the sidebar, command menu, Markdown export and `llms.txt` pick them up with no new plumbing. The framework selector already renders nothing for pages that declare no framework variants, so a starter page shows none. ## Additional context The starter pages are added here in the current site's page layout; the last PR in the stack converts them to the new one along with every other guide. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a Starter Apps section to the side navigation and command menu. - Added links for Next.js, SaaS, AI Chat, and Flutter starter projects, marked as new. - **Documentation** - Added setup and deployment guides for the Next.js and SaaS starters. - Added an AI Chat App guide covering configuration, local verification, and deployment. - Added a Flutter starter guide covering authentication, profiles, avatars, deep links, and hosted setup. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
70 lines
2.8 KiB
Plaintext
70 lines
2.8 KiB
Plaintext
---
|
|
title: SaaS Starter
|
|
description: A Next.js subscription app with Supabase Auth and Stripe billing
|
|
---
|
|
|
|
The [Supabase Community subscription template](https://github.com/supabase-community/nextjs-subscription-payments) includes authentication, subscription checkout, a customer portal, and database migrations. Its components and billing routes are installed together when you create the app.
|
|
|
|
## Installation
|
|
|
|
### Create the app
|
|
|
|
Scaffold the complete template with the [Next.js CLI](https://nextjs.org/docs/app/api-reference/cli/create-next-app):
|
|
|
|
```bash
|
|
npx create-next-app@latest my-saas --example https://github.com/supabase-community/nextjs-subscription-payments --use-pnpm
|
|
cd my-saas
|
|
```
|
|
|
|
The scaffold uses the template's dependency versions and includes its authentication implementation. Review dependency updates before deploying your app.
|
|
|
|
## Start Supabase
|
|
|
|
Install [Docker](https://docs.docker.com/get-started/get-docker/) and the [Supabase CLI](https://supabase.com/docs/guides/local-development/cli/getting-started). Copy the template's environment files, then start its local database and migrations:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
cp .env.local.example .env.local
|
|
pnpm supabase:start
|
|
```
|
|
|
|
Use the values printed by `pnpm supabase:status` to fill in `.env.local`:
|
|
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=your-local-api-url
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-local-anon-key
|
|
SUPABASE_SERVICE_ROLE_KEY=your-local-service-role-key
|
|
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-test-publishable-key
|
|
STRIPE_SECRET_KEY=your-stripe-test-secret-key
|
|
STRIPE_WEBHOOK_SECRET=your-local-webhook-signing-secret
|
|
```
|
|
|
|
These names match the template. Keep `SUPABASE_SERVICE_ROLE_KEY`, `STRIPE_SECRET_KEY`, and `STRIPE_WEBHOOK_SECRET` in server environment variables.
|
|
|
|
## Connect Stripe
|
|
|
|
Install the [Stripe CLI](https://docs.stripe.com/stripe-cli), sign in, and keep webhook forwarding running in a separate terminal:
|
|
|
|
```bash
|
|
pnpm stripe:login
|
|
pnpm stripe:listen
|
|
```
|
|
|
|
Copy the listener's signing secret into `STRIPE_WEBHOOK_SECRET`. Start the app in another terminal:
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
Load the template's sample test products after the app and webhook listener are running:
|
|
|
|
```bash
|
|
pnpm stripe:fixtures
|
|
```
|
|
|
|
Open [the app](http://localhost:3000), create an account, and test a subscription. Configure the [Stripe customer portal](https://dashboard.stripe.com/test/settings/billing/portal) to let customers change or cancel their plans.
|
|
|
|
## Deploy the app
|
|
|
|
Follow the template's [deployment setup](https://github.com/supabase-community/nextjs-subscription-payments#step-by-step-setup) for the hosted database, Auth URLs, production Stripe keys, and webhook endpoint. The template's [package scripts](https://github.com/supabase-community/nextjs-subscription-payments/blob/main/package.json) cover local migrations and billing fixtures.
|