diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 734c7e55a01..b3bf6082e62 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -375,6 +375,10 @@ export const gettingstarted: NavMenuConstant = { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' as `/${string}`, }, + { + name: 'TanStack Start', + url: '/guides/getting-started/quickstarts/tanstack' as `/${string}`, + }, { name: 'Laravel PHP', url: '/guides/getting-started/quickstarts/laravel' as `/${string}`, diff --git a/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx new file mode 100644 index 00000000000..655434f82e2 --- /dev/null +++ b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx @@ -0,0 +1,164 @@ +--- +title: 'Use Supabase with TanStack Start' +subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a TanStack Start app.' +breadcrumb: 'Framework Quickstarts' +hideToc: true +--- + + + + + + <$Partial path="quickstart_db_setup.mdx" /> + + + + + + + + - Create a TanStack Start app using the official CLI. + + <$Partial path="uiLibCta.mdx" /> + + + + + + ```bash name=Terminal + npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome + ``` + + + + + + + + + The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a TanStack Start app. + + Navigate to the TanStack Start app and install `supabase-js`. + + + + + + ```bash name=Terminal + cd my-app && npm install @supabase/supabase-js + ``` + + + + + + + + + Create a `.env` file in the root of your project and populate with your Supabase connection variables: + + + + + + + + + + <$CodeTabs> + + ```text name=.env + VITE_SUPABASE_URL= + VITE_SUPABASE_PUBLISHABLE_KEY= + ``` + + + + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} /> + + + + + + + + + Create a new file at `src/utils/supabase.ts` to initialize the Supabase client. + + + + + + ```ts name=src/utils/supabase.ts + import { createClient } from "@supabase/supabase-js"; + + export const supabase = createClient( + import.meta.env.VITE_SUPABASE_URL, + import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY + ); + ``` + + + + + + + + + Replace the contents of `src/routes/index.tsx` with the following code to add a loader function that fetches the instruments data and displays it on the page. + + + + + ```tsx name=src/routes/index.tsx + import { createFileRoute } from '@tanstack/react-router' + import { supabase } from '../utils/supabase' + + export const Route = createFileRoute('/')({ + loader: async () => { + const { data: instruments } = await supabase.from('instruments').select() + return { instruments } + }, + component: Home, + }) + + function Home() { + const { instruments } = Route.useLoaderData() + + return ( +
    + {instruments?.map((instrument) => ( +
  • {instrument.name}
  • + ))} +
+ ) + } + ``` + +
+ +
+ + + + + Run the development server, go to http://localhost:3000 in a browser and you should see the list of instruments. + + + + + + ```bash name=Terminal + npm run dev + ``` + + + + +
+ +## Next steps + +- Set up [Auth](/docs/guides/auth) for your app +- [Insert more data](/docs/guides/database/import-data) into your database +- Upload and serve static files using [Storage](/docs/guides/storage) diff --git a/apps/docs/features/command/Quickstarts.tsx b/apps/docs/features/command/Quickstarts.tsx index 3b0f75cc264..66570336a34 100644 --- a/apps/docs/features/command/Quickstarts.tsx +++ b/apps/docs/features/command/Quickstarts.tsx @@ -35,6 +35,10 @@ const quickstarts = [ label: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs', }, + { + label: 'TanStack Start', + url: '/guides/getting-started/quickstarts/tanstack', + }, { label: 'Vue', url: '/guides/getting-started/quickstarts/vue',