mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Palash Awasthi
165582b08e
## 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? Docs update — adds a new framework quickstart. ## What is the current behavior? The Framework Quickstarts section under Getting Started covers Next.js, Nuxt, React, Flask, and others, but doesn't include Reflex (https://reflex.dev), an open-source Python web framework that compiles to React. Python developers building full-stack apps with Reflex have to piece together the Supabase setup from the general Python reference rather than following a quickstart. ## What is the new behavior? Adds a Reflex framework quickstart at `apps/docs/content/guides/getting-started/quickstarts/reflex.mdx`, mirroring the structure of the existing Flask quickstart: same DB setup partial (`quickstart_db_setup.mdx`), same env var step using `ProjectConfigVariables`, same six-step `StepHikeCompact` shape. A nav entry is added directly after Flask in `NavigationMenu.constants.ts`, gated on `!jsOnly` to match Flask's pattern. Verified end-to-end against a fresh Supabase project: ran every command in the docs literally, including the full SQL from `quickstart_db_setup.mdx` (with the `grant select on public.instruments to anon` line). The rendered Reflex app shows the Instruments heading with all three seeded rows. No console errors, no event-loop warnings. ## Additional context Conventions used in the quickstart: - Uses `uv` (`uv init`, `uv add`, `uv run`) rather than pip + venv. This follows the broader docs pattern of each quickstart using its framework's idiomatic tooling (Next.js → npx, RedwoodJS → yarn, Laravel → composer, Flutter → pubspec.yaml). It also matches what Reflex's own `reflex init` post-install message recommends. `uv add` produces a `pyproject.toml` and `uv.lock` so users can rebuild deterministically with `uv sync`. - The Supabase client is constructed via `acreate_client` with a lazy-init pattern, and the event handler is `async def`. This avoids blocking Reflex's event loop on the HTTP request. In touch with the Supabase team on this — happy to iterate on copy or scope based on review. Pre-flight: ran pnpm run format locally, which passed cleanly. Did not run pnpm run build locally — hit a Windows/CRLF-related TOML parsing failure in an unrelated troubleshooting frontmatter file (apps/docs/content/troubleshooting/all-about-supabase-egress-a_Sg_e.mdx) during page data collection. Relying on Vercel preview to validate the build. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Reflex (Python) and Spring Boot to the framework quickstarts. * Reorganized quickstart listings for clearer framework navigation and grouping. * **Documentation** * Added a Reflex quickstart guide covering Supabase setup, environment variables, asynchronous data loading, error handling, and running the app. * Added Reflex-specific AI guidance for configuring Supabase projects. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Nik Richers <nik@validmind.ai>
379 lines
13 KiB
TypeScript
379 lines
13 KiB
TypeScript
import type { ContentListingGroup } from '~/lib/content-listings.schema'
|
|
|
|
export const gettingStartedOverview: ContentListingGroup = {
|
|
id: 'getting-started-overview',
|
|
type: 'grid',
|
|
items: [
|
|
{
|
|
title: 'Build with AI tools',
|
|
href: '/guides/ai-tools',
|
|
description: 'Develop with Supabase AI-first using plugins, MCP, and skills.',
|
|
},
|
|
{
|
|
title: 'API Keys',
|
|
href: '/guides/getting-started/api-keys',
|
|
description: 'Learn about the different API keys in Supabase and how to use them.',
|
|
},
|
|
{
|
|
title: 'Local Development',
|
|
href: '/guides/local-development',
|
|
description: 'Use the Supabase CLI to develop locally and collaborate between teams.',
|
|
},
|
|
],
|
|
}
|
|
|
|
export const gettingStartedUseCases: ContentListingGroup = {
|
|
id: 'getting-started-use-cases',
|
|
heading: 'Use cases',
|
|
headingLevel: 'h3',
|
|
type: 'grid',
|
|
items: [
|
|
{
|
|
title: 'AI, Vectors, and embeddings',
|
|
href: '/guides/ai#examples',
|
|
icon: '/docs/img/icons/openai_logo',
|
|
hasLightIcon: true,
|
|
description: 'Build AI-enabled applications using our Vector toolkit.',
|
|
},
|
|
{
|
|
title: 'Subscription Payments (SaaS)',
|
|
href: 'https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Clone, deploy, and fully customize a SaaS subscription application with Next.js.',
|
|
},
|
|
{
|
|
title: 'Partner Gallery',
|
|
href: 'https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
hasLightIcon: false,
|
|
description: 'Postgres full-text search, image storage, and more.',
|
|
},
|
|
],
|
|
}
|
|
|
|
export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
|
|
id: 'getting-started-framework-quickstarts',
|
|
heading: 'Framework quickstarts',
|
|
headingLevel: 'h3',
|
|
type: 'grid',
|
|
items: [
|
|
{
|
|
title: 'React',
|
|
href: '/guides/getting-started/quickstarts/reactjs',
|
|
icon: '/docs/img/icons/react-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Build single-page apps from reusable components, and query Supabase Postgres from the browser.',
|
|
},
|
|
{
|
|
title: 'Next.js',
|
|
href: '/guides/getting-started/quickstarts/nextjs',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Full-stack React with server rendering, wired to Supabase Postgres and cookie-based auth.',
|
|
},
|
|
{
|
|
title: 'TanStack Start',
|
|
href: '/guides/getting-started/quickstarts/tanstack',
|
|
icon: '/docs/img/icons/tanstack-icon',
|
|
hasLightIcon: true,
|
|
description: 'Type-safe full-stack React that queries Supabase Postgres in server functions.',
|
|
},
|
|
{
|
|
title: 'Astro',
|
|
href: '/guides/getting-started/quickstarts/astrojs',
|
|
icon: '/docs/img/icons/astro-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Content-driven sites that render on the server and pull Supabase Postgres data per request.',
|
|
},
|
|
{
|
|
title: 'Vue',
|
|
href: '/guides/getting-started/quickstarts/vue',
|
|
icon: '/docs/img/icons/vuejs-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Build single-page apps with the Vue composition API, backed by Supabase Postgres.',
|
|
},
|
|
{
|
|
title: 'Nuxt',
|
|
href: '/guides/getting-started/quickstarts/nuxtjs',
|
|
icon: '/docs/img/icons/nuxt-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Full-stack Vue with server rendering, reading Postgres through a Supabase composable.',
|
|
},
|
|
{
|
|
title: 'SvelteKit',
|
|
href: '/guides/getting-started/quickstarts/sveltekit',
|
|
icon: '/docs/img/icons/svelte-icon',
|
|
hasLightIcon: false,
|
|
description: 'Full-stack Svelte that loads Supabase Postgres data in server load functions.',
|
|
},
|
|
{
|
|
title: 'SolidJS',
|
|
href: '/guides/getting-started/quickstarts/solidjs',
|
|
icon: '/docs/img/icons/solidjs-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Fine-grained reactive UIs that load Supabase Postgres data with Solid resources.',
|
|
},
|
|
{
|
|
title: 'RedwoodJS',
|
|
href: '/guides/getting-started/quickstarts/redwoodjs',
|
|
icon: '/docs/img/icons/redwood-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Full-stack React and GraphQL, with Prisma migrations against your Supabase Postgres database.',
|
|
},
|
|
{
|
|
title: 'Refine',
|
|
href: '/guides/getting-started/quickstarts/refine',
|
|
icon: '/docs/img/icons/refine-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Scaffold CRUD dashboards and admin panels straight from your Supabase Postgres tables.',
|
|
},
|
|
{
|
|
title: 'Hono',
|
|
href: '/guides/getting-started/quickstarts/hono',
|
|
icon: '/docs/img/icons/hono-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Lightweight web APIs with Supabase Auth anonymous sign-in and RLS-protected reads.',
|
|
},
|
|
{
|
|
title: 'iOS SwiftUI',
|
|
href: '/guides/getting-started/quickstarts/ios-swiftui',
|
|
icon: '/docs/img/icons/swift-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:swift',
|
|
description: 'Native iOS apps in Swift, reading Postgres through the Supabase Swift SDK.',
|
|
},
|
|
{
|
|
title: 'Android Kotlin',
|
|
href: '/guides/getting-started/quickstarts/kotlin',
|
|
icon: '/docs/img/icons/kotlin-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:kotlin',
|
|
description:
|
|
'Native Android apps in Kotlin and Jetpack Compose, using the Supabase Kotlin SDK.',
|
|
},
|
|
{
|
|
title: 'Expo React Native',
|
|
href: '/guides/getting-started/quickstarts/expo-react-native',
|
|
icon: '/docs/img/icons/expo-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Ship iOS and Android from one React Native codebase, backed by Supabase Postgres.',
|
|
},
|
|
{
|
|
title: 'Flutter',
|
|
href: '/guides/getting-started/quickstarts/flutter',
|
|
icon: '/docs/img/icons/flutter-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:dart',
|
|
description: 'Ship iOS and Android from one Dart codebase, backed by Supabase Postgres.',
|
|
},
|
|
{
|
|
title: 'Python',
|
|
href: '/guides/getting-started/quickstarts/flask',
|
|
icon: '/docs/img/icons/python-icon',
|
|
hasLightIcon: false,
|
|
description: 'Serve Flask web apps that query Postgres with the Supabase Python client.',
|
|
},
|
|
{
|
|
title: 'Reflex',
|
|
href: '/guides/getting-started/quickstarts/reflex',
|
|
icon: '/docs/img/icons/reflex-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Full-stack Python web apps that query Supabase Postgres with the async Python client.',
|
|
},
|
|
{
|
|
title: 'Laravel',
|
|
href: '/guides/getting-started/quickstarts/laravel',
|
|
icon: '/docs/img/icons/laravel-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Full-stack PHP with Eloquent ORM connected directly to your Supabase Postgres database.',
|
|
},
|
|
{
|
|
title: 'Ruby on Rails',
|
|
href: '/guides/getting-started/quickstarts/ruby-on-rails',
|
|
icon: '/docs/img/icons/rails-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Convention-driven Ruby apps with Active Record connected directly to your Supabase Postgres database.',
|
|
},
|
|
{
|
|
title: 'Spring Boot',
|
|
href: '/guides/getting-started/quickstarts/spring-boot',
|
|
icon: '/docs/img/icons/spring-boot-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Java APIs with Spring Data JPA connected directly to your Supabase Postgres database.',
|
|
},
|
|
],
|
|
}
|
|
|
|
export const gettingStartedWebAppDemos: ContentListingGroup = {
|
|
id: 'getting-started-web-app-demos',
|
|
heading: 'Web app demos',
|
|
headingLevel: 'h3',
|
|
type: 'grid',
|
|
items: [
|
|
{
|
|
title: 'Next.js',
|
|
href: '/guides/getting-started/tutorials/with-nextjs',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'React',
|
|
href: '/guides/getting-started/tutorials/with-react',
|
|
icon: '/docs/img/icons/react-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Vue 3',
|
|
href: '/guides/getting-started/tutorials/with-vue-3',
|
|
icon: '/docs/img/icons/vuejs-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Nuxt 3',
|
|
href: '/guides/getting-started/tutorials/with-nuxt-3',
|
|
icon: '/docs/img/icons/nuxt-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Angular',
|
|
href: '/guides/getting-started/tutorials/with-angular',
|
|
icon: '/docs/img/icons/angular-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'RedwoodJS',
|
|
href: '/guides/getting-started/tutorials/with-redwoodjs',
|
|
icon: '/docs/img/icons/redwood-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Svelte',
|
|
href: '/guides/getting-started/tutorials/with-svelte',
|
|
icon: '/docs/img/icons/svelte-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'SvelteKit',
|
|
href: '/guides/getting-started/tutorials/with-sveltekit',
|
|
icon: '/docs/img/icons/svelte-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Refine',
|
|
href: '/guides/getting-started/tutorials/with-refine',
|
|
icon: '/docs/img/icons/refine-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
],
|
|
}
|
|
|
|
export const gettingStartedMobileTutorials: ContentListingGroup = {
|
|
id: 'getting-started-mobile-tutorials',
|
|
heading: 'Mobile tutorials',
|
|
headingLevel: 'h3',
|
|
type: 'grid',
|
|
items: [
|
|
{
|
|
title: 'Flutter',
|
|
href: '/guides/getting-started/tutorials/with-flutter',
|
|
icon: '/docs/img/icons/flutter-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:dart',
|
|
description:
|
|
'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Expo React Native',
|
|
href: '/guides/getting-started/tutorials/with-expo-react-native',
|
|
icon: '/docs/img/icons/expo-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Expo React Native Social Auth',
|
|
href: '/guides/auth/quickstarts/with-expo-react-native-social-auth',
|
|
icon: '/docs/img/icons/expo-icon',
|
|
hasLightIcon: true,
|
|
description:
|
|
'Learn how to implement social authentication in an app with Expo React Native and Supabase Database and Auth functionality.',
|
|
},
|
|
{
|
|
title: 'Android Kotlin',
|
|
href: '/guides/getting-started/tutorials/with-kotlin',
|
|
icon: '/docs/img/icons/kotlin-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:kotlin',
|
|
description:
|
|
'Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'iOS Swift',
|
|
href: '/guides/getting-started/tutorials/with-swift',
|
|
icon: '/docs/img/icons/swift-icon',
|
|
hasLightIcon: false,
|
|
feature: 'sdk:swift',
|
|
description:
|
|
'Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Ionic React',
|
|
href: '/guides/getting-started/tutorials/with-ionic-react',
|
|
icon: '/docs/img/icons/ionic-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Ionic Vue',
|
|
href: '/guides/getting-started/tutorials/with-ionic-vue',
|
|
icon: '/docs/img/icons/ionic-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
{
|
|
title: 'Ionic Angular',
|
|
href: '/guides/getting-started/tutorials/with-ionic-angular',
|
|
icon: '/docs/img/icons/ionic-icon',
|
|
hasLightIcon: false,
|
|
description:
|
|
'Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.',
|
|
},
|
|
],
|
|
}
|