mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Palash AwasthiandNik Richers
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>
139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
import { isFeatureEnabled } from 'common'
|
|
|
|
import { IconLinkImage, IconLinkList } from '@/features/ui/IconLink'
|
|
|
|
const {
|
|
sdkDart: sdkDartEnabled,
|
|
sdkKotlin: sdkKotlinEnabled,
|
|
sdkSwift: sdkSwiftEnabled,
|
|
} = isFeatureEnabled(['sdk:dart', 'sdk:kotlin', 'sdk:swift'])
|
|
|
|
const frameworks = [
|
|
{
|
|
name: 'React',
|
|
icon: '/docs/img/icons/react-icon',
|
|
href: '/guides/getting-started/quickstarts/reactjs',
|
|
},
|
|
{
|
|
name: 'Next.js',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
href: '/guides/getting-started/quickstarts/nextjs',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'TanStack Start',
|
|
icon: '/docs/img/icons/tanstack-icon',
|
|
href: '/guides/getting-started/quickstarts/tanstack',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Astro',
|
|
icon: '/docs/img/icons/astro-icon',
|
|
href: '/guides/getting-started/quickstarts/astrojs',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Vue',
|
|
icon: '/docs/img/icons/vuejs-icon',
|
|
href: '/guides/getting-started/quickstarts/vue',
|
|
},
|
|
{
|
|
name: 'Nuxt',
|
|
icon: '/docs/img/icons/nuxt-icon',
|
|
href: '/guides/getting-started/quickstarts/nuxtjs',
|
|
},
|
|
{
|
|
name: 'SvelteKit',
|
|
icon: '/docs/img/icons/svelte-icon',
|
|
href: '/guides/getting-started/quickstarts/sveltekit',
|
|
},
|
|
{
|
|
name: 'SolidJS',
|
|
icon: '/docs/img/icons/solidjs-icon',
|
|
href: '/guides/getting-started/quickstarts/solidjs',
|
|
},
|
|
{
|
|
name: 'RedwoodJS',
|
|
icon: '/docs/img/icons/redwood-icon',
|
|
href: '/guides/getting-started/quickstarts/redwoodjs',
|
|
},
|
|
{
|
|
name: 'Refine',
|
|
icon: '/docs/img/icons/refine-icon',
|
|
href: '/guides/getting-started/quickstarts/refine',
|
|
},
|
|
{
|
|
name: 'Hono',
|
|
icon: '/docs/img/icons/hono-icon',
|
|
href: '/guides/getting-started/quickstarts/hono',
|
|
},
|
|
{
|
|
name: 'iOS Swift',
|
|
icon: '/docs/img/icons/swift-icon-orange',
|
|
href: '/guides/getting-started/quickstarts/ios-swiftui',
|
|
enabled: sdkSwiftEnabled,
|
|
},
|
|
{
|
|
name: 'Android Kotlin',
|
|
icon: '/docs/img/icons/kotlin-icon',
|
|
href: '/guides/getting-started/quickstarts/kotlin',
|
|
enabled: sdkKotlinEnabled,
|
|
},
|
|
{
|
|
name: 'Expo React Native',
|
|
icon: '/docs/img/icons/expo-icon',
|
|
href: '/guides/getting-started/quickstarts/expo-react-native',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Flutter',
|
|
icon: '/docs/img/icons/flutter-icon',
|
|
href: '/guides/getting-started/quickstarts/flutter',
|
|
enabled: sdkDartEnabled,
|
|
},
|
|
{
|
|
name: 'Python',
|
|
icon: '/docs/img/icons/python-icon',
|
|
href: '/guides/getting-started/quickstarts/flask',
|
|
},
|
|
{
|
|
name: 'Reflex',
|
|
icon: '/docs/img/icons/reflex-icon',
|
|
href: '/guides/getting-started/quickstarts/reflex',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Laravel',
|
|
icon: '/docs/img/icons/laravel-icon',
|
|
href: '/guides/getting-started/quickstarts/laravel',
|
|
},
|
|
{
|
|
name: 'Ruby on Rails',
|
|
icon: '/docs/img/icons/rails-icon',
|
|
href: '/guides/getting-started/quickstarts/ruby-on-rails',
|
|
},
|
|
{
|
|
name: 'Spring Boot',
|
|
icon: '/docs/img/icons/spring-boot-icon',
|
|
href: '/guides/getting-started/quickstarts/spring-boot',
|
|
},
|
|
]
|
|
|
|
export function FrameworkQuickstarts({ labelledBy }: { labelledBy?: string }) {
|
|
return (
|
|
<IconLinkList
|
|
labelledBy={labelledBy}
|
|
size="lg"
|
|
items={frameworks
|
|
.filter((framework) => framework.enabled !== false)
|
|
.map((framework) => ({
|
|
title: framework.name,
|
|
href: framework.href,
|
|
icon: (
|
|
<IconLinkImage path={framework.icon} hasLightIcon={framework.hasLightIcon} size="lg" />
|
|
),
|
|
}))}
|
|
/>
|
|
)
|
|
}
|