Use Supabase with TanStack Start

<$Partial path="quickstart_db_setup.mdx" />

<StepHikeCompact.Details title="Create a TanStack Start app">

- Create a TanStack Start app using the official CLI.

<$Partial path="uiLibCta.mdx" />

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome
  ```

</StepHikeCompact.Code>

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`.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  cd my-app && npm install @supabase/supabase-js
  ```

</StepHikeCompact.Code>

Create a `.env` file in the root of your project and populate with your Supabase connection variables:

<ProjectConfigVariables variable="url" />
<ProjectConfigVariables variable="publishable" />


</StepHikeCompact.Details>

<StepHikeCompact.Code>

  <$CodeTabs>

    ```text name=.env
    VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
    VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
    ```

  </$CodeTabs>

  <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />

</StepHikeCompact.Code>

Create a new file at `src/utils/supabase.ts` to initialize the Supabase client.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```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
  );
  ```

</StepHikeCompact.Code>

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.

</StepHikeCompact.Details>
<StepHikeCompact.Code>

  ```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 (
      <ul>
        {instruments?.map((instrument) => (
          <li key={instrument.name}>{instrument.name}</li>
        ))}
      </ul>
    )
  }
  ```

</StepHikeCompact.Code>

Run the development server, go to http://localhost:3000 in a browser and you should see the list of instruments.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npm run dev
  ```

</StepHikeCompact.Code>