docs: standardize quickstart guides (#48950)

## 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 ## What is the new behavior? - All 19 guides follow one step order: create project → set up database → create app → AI tooling → add keys → create client → query data → run it → go to production. Added _template.mdx with structure requirements; it is not enforced with a lint check for now - this will be a separate PR before adding new guides. - 4 new partials replace copy-pasted blocks (AI tooling, connection strings, mobile env vars, going to production). - Error handling: return a message instead of a blank page when a query fails. - All guides verified and tested separately - all work as described. What was fixed: wrong env var names in the Hono sample, a Next.js page that redirected to login, missing database permissions in Refine and Hono, and stale file paths and APIs in SvelteKit, Refine, and TanStack. - Astro, Expo, Python, Laravel, and Rails were live but missing from the quickstart grid or listing page. Added, with two new icons. ## Quick links for review Base preview: https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs **Quickstart discovery**: new Astro/Expo/Python/Laravel/Rails entries and icons - [Docs homepage grid](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs) <img width="1998" height="882" alt="CleanShot 2026-08-12 at 12 06 31@2x" src="https://github.com/user-attachments/assets/942eb7e2-1e85-4b20-a6a7-c2b127d31b2b" /> - [Getting started overview](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started) <img width="856" height="878" alt="CleanShot 2026-08-12 at 12 13 30@2x" src="https://github.com/user-attachments/assets/d48091a9-7daf-4796-a521-14116b7479c9" /> ### New shared files: **[apps/docs/content/guides/getting-started/quickstarts/_template.mdx](https://github.com/supabase/supabase/blob/e311542913cf8da07f322a7586339d6f5de30c61/apps/docs/content/guides/getting-started/quickstarts/_template.mdx?plain=1)** A reference contract the other 19 quickstart guides are checked against. Documents the required frontmatter, the canonical 10-step section order, every guide's deviation from that order (and why), the direct-Postgres exception (Laravel/Rails/RedwoodJS/Spring Boot), and the discovery-surface/icon requirements for adding a new guide. No lint rule enforces it yet; that's a follow-up PR. **[apps/docs/content/_partials/quickstart_ai_tooling.mdx](https://github.com/supabase/supabase/blob/e311542913cf8da07f322a7586339d6f5de30c61/apps/docs/content/_partials/quickstart_ai_tooling.mdx?plain=1)** Example: [Next.js](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#4-set-up-ai-tooling-optional) → "Set up AI tooling" section Shared by all 19 guides: astrojs, expo-react-native, flask, flutter, hono, ios-swiftui, kotlin, laravel, nextjs, nuxtjs, reactjs, redwoodjs, refine, ruby-on-rails, solidjs, spring-boot, sveltekit, tanstack, vue **[apps/docs/content/_partials/quickstart_going_to_production.mdx](https://github.com/supabase/supabase/blob/e311542913cf8da07f322a7586339d6f5de30c61/apps/docs/content/_partials/quickstart_going_to_production.mdx?plain=1)** Example: [Next.js](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#going-to-production) → "Going to production" section Shared by all 19 guides: same full list as above **[apps/docs/content/_partials/quickstart_connection_string.mdx](https://github.com/supabase/supabase/blob/e311542913cf8da07f322a7586339d6f5de30c61/apps/docs/content/_partials/quickstart_connection_string.mdx?plain=1)** Example: [Laravel](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/laravel#5-set-up-the-postgres-connection-details) → connection string setup step Shared by 3 guides: laravel, ruby-on-rails, spring-boot – the ORM/backend frameworks that connect directly to Postgres rather than through the Data API **[apps/docs/content/_partials/quickstart_mobile_env_note.mdx](https://github.com/supabase/supabase/blob/e311542913cf8da07f322a7586339d6f5de30c61/apps/docs/content/_partials/quickstart_mobile_env_note.mdx?plain=1)** Example: [iOS SwiftUI](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/ios-swiftui#get-api-details:~:text=This%20guide%20substitutes%20your%20project%20URL%20and%20key%20directly) → environment variables step Shared by 3 guides: ios-swiftui, flutter, kotlin – note Expo React Native is mobile too but doesn't use this partial, since it has its own `EXPO_PUBLIC_` prefix convention inline instead. ## Per guide changes **[Astro](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/astrojs#9-query-supabase-data-from-astro)** Typed query error in the server client sample. **[Expo React Native](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/expo-react-native#8-query-data-from-the-app)** Added an `error` state alongside instruments. Also removed the broken [`--web` verification path](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/expo-react-native#9-start-the-app): expo-sqlite needs Metro wasm + COEP/COOP config the guide never had (CodeRabbit finding). **[Flask](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/flask#7-create-the-supabase-client)** Split "Create the Supabase client" and ["Query data"](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/flask#8-query-data-from-the-app) into their own steps. **[Flutter](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/flutter#9-setup-deep-links-optional)** Reworded the deep-links section; keeps the framework-specific [Android `INTERNET` permission subsection](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/flutter#android) under "Going to production." **[Hono](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/hono#6-declare-supabase-environment-variables)** Split into "Install dependencies," "Declare environment variables," "Set up anonymous sign-ins," and "Query data" as separate steps. Fixes wrong env var names from the previous sample. **[iOS SwiftUI](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/ios-swiftui#8-query-data-from-the-app)** Added an `isLoading` state so the loading overlay doesn't hang forever on a successful empty result (CodeRabbit fix). **[Kotlin](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/kotlin#5-install-dependencies)** Fixed the Compose compiler plugin declaration: `apply false` was missing from the app module (CodeRabbit finding). **[Laravel](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/laravel#5-set-up-the-postgres-connection-details)** Now uses the shared `quickstart_connection_string.mdx` partial for the session-pooler/SSL guidance instead of inline copy. **[Next.js](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#6-allow-public-access-to-the-instruments-page)** New step fixing the page that previously redirected to login. Its middleware path check is also now segment-aware so it doesn't over-match paths like `/instruments-private` (CodeRabbit finding). **[Nuxt](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/nuxtjs#7-create-the-supabase-client)** "Create the Supabase client" and ["Query data"](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/nuxtjs#8-query-data-from-the-app) split out as their own steps. **[React](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/reactjs#7-create-the-supabase-client)** Same client-creation/[query-data](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/reactjs#8-query-data-from-the-app) split as the other Vite-based guides. **[RedwoodJS](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/redwoodjs#2-gather-database-connection-strings)** Expanded into explicit transaction-mode/session-mode connection strings, Prisma schema, migration, seed, and scaffold steps; fixes stale file paths and APIs from the previous version. **[Refine](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/refine#8-allow-writes-to-the-instruments-table)** New step fixing the missing RLS grants that made the scaffolded create/edit pages fail. **[Ruby on Rails](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/ruby-on-rails#4-set-up-the-postgres-connection-details)** Now uses `quickstart_connection_string.mdx`; added a [reminder to save the database password](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/ruby-on-rails#1-create-a-supabase-project) before it's needed for the connection string. **[SolidJS](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/solidjs#7-create-the-supabase-client)** Same client-creation/[query-data](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/solidjs#8-query-data-from-the-app) split, adapted to Solid's `resource.error`. **[Spring Boot](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/spring-boot#4-set-up-the-postgres-connection-details)** Connection-string section now uses the shared partial instead of a duplicated inline caution. **[SvelteKit](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/sveltekit#8-query-data-from-the-app)** Updated `load` functions (both `+page.js` and `+page.server.ts` variants) with explicit query-error typing; fixes stale file paths and APIs from the previous version. **[TanStack](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/tanstack#8-query-supabase-data-from-tanstack-start)** `fetchInstruments` now returns and renders the query error instead of silently returning an empty list (CodeRabbit finding); fixes stale file paths and APIs from the previous version. **[Vue](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/vue#7-create-the-supabase-client)** Same client-creation/[query-data](https://docs-git-docs-standardize-framework-quickstarts-supabase.vercel.app/docs/guides/getting-started/quickstarts/vue#8-query-data-from-the-app) split as the other Vite-based guides.  ## Summary by CodeRabbit * **New Features** * Added SolidJS, RedwoodJS, Refine, Laravel, and Ruby on Rails quickstarts. * Added framework discovery entries for Astro, Expo React Native, Python, Laravel, and Rails. * Added optional AI tooling, MCP setup, connection-string, mobile configuration, and production-readiness guidance. * Added a Hono authentication example with anonymous sign-in, user details, and instrument data. * **Documentation** * Expanded setup, environment, authentication, RLS, migration, SSL, and deployment guidance. * **Bug Fixes** * Improved sample error handling for failed data requests.  --------- Co-authored-by: Miranda Limonczenko <miranda.limonczenko@supabase.io>
2026-10-05 09:25:06 +03:00 · 2026-08-14 15:03:37 +02:00
1 parent ebb8e2336e
commit ee1eb5dbca
@@ -65,7 +65,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/react-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
+        'Build single-page apps from reusable components, and query Supabase Postgres from the browser.',
    },
    {
      title: 'Next.js',
@@ -73,7 +73,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/nextjs-icon',
      hasLightIcon: true,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Next.js app.',
+        'Full-stack React with server rendering, wired to Supabase Postgres and cookie-based auth.',
    },
    {
      title: 'Nuxt',
@@ -81,7 +81,15 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/nuxt-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Nuxt app.',
+        'Full-stack Vue with server rendering, reading Postgres through a Supabase composable.',
+    },
+    {
+      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: 'Hono',
@@ -89,7 +97,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/hono-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, secure it with auth, and query the data from a Hono app.',
+        'Lightweight web APIs with Supabase Auth anonymous sign-in and RLS-protected reads.',
    },
    {
      title: 'RedwoodJS',
@@ -97,7 +105,15 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/redwood-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
+        'Full-stack React and GraphQL, with Prisma migrations against your Supabase Postgres database.',
+    },
+    {
+      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',
@@ -105,8 +121,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/flutter-icon',
      hasLightIcon: false,
      feature: 'sdk:dart',
-      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
+      description: 'Ship iOS and Android from one Dart codebase, backed by Supabase Postgres.',
    },
    {
      title: 'iOS SwiftUI',
@@ -114,8 +129,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/swift-icon',
      hasLightIcon: false,
      feature: 'sdk:swift',
-      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from an iOS app.',
+      description: 'Native iOS apps in Swift, reading Postgres through the Supabase Swift SDK.',
    },
    {
      title: 'Android Kotlin',
@@ -124,15 +138,14 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      hasLightIcon: false,
      feature: 'sdk:kotlin',
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.',
+        'Native Android apps in Kotlin and Jetpack Compose, using the Supabase Kotlin SDK.',
    },
    {
      title: 'SvelteKit',
      href: '/guides/getting-started/quickstarts/sveltekit',
      icon: '/docs/img/icons/svelte-icon',
      hasLightIcon: false,
-      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
+      description: 'Full-stack Svelte that loads Supabase Postgres data in server load functions.',
    },
    {
      title: 'SolidJS',
@@ -140,7 +153,7 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/solidjs-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.',
+        'Fine-grained reactive UIs that load Supabase Postgres data with Solid resources.',
    },
    {
      title: 'Vue',
@@ -148,15 +161,14 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/vuejs-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.',
+        'Build single-page apps with the Vue composition API, backed by Supabase Postgres.',
    },
    {
      title: 'TanStack Start',
      href: '/guides/getting-started/quickstarts/tanstack',
      icon: '/docs/img/icons/tanstack-icon',
      hasLightIcon: true,
-      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a TanStack Start app.',
+      description: 'Type-safe full-stack React that queries Supabase Postgres in server functions.',
    },
    {
      title: 'Refine',
@@ -164,7 +176,30 @@ export const gettingStartedFrameworkQuickstarts: ContentListingGroup = {
      icon: '/docs/img/icons/refine-icon',
      hasLightIcon: false,
      description:
-        'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Refine app.',
+        'Scaffold CRUD dashboards and admin panels straight from your Supabase Postgres tables.',
+    },
+    {
+      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: '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.',
    },
  ],
 }