ContextQMD
Back to Supabase

Use Supabase with Astro

apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx

1.26.083.4 KB
Original Source
<AiPrompt id="astrojs" />

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

3. Create an Astro app

Create an Astro app using the npm create command.

bash
npm create astro@latest my-app
cd my-app

4. Install Supabase's Agent Skills (optional)

Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

To install, run the following command in the root of your project:

bash
npx skills add supabase/agent-skills

5. Install Supabase client library and Node adapter

Install the supabase-js client library and the @astrojs/node adapter to enable server-side rendering.

bash
npm install @supabase/supabase-js @astrojs/node

6. Configure Astro for SSR

Update your astro.config.mjs.

js
import node from '@astrojs/node'
import { defineConfig } from 'astro/config'

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
})

7. Declare Supabase environment variables

Create a .env.local file and populate with your Supabase connection variables that you can get from the helper below, or from the project Connect panel:

<Button variant="primary" asChild> <a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=astro"> Open Connect panel </a> </Button>
text
PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>

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

8. Create a Supabase client helper

Create a utility file to initialize the Supabase client:

ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL
const supabasePublishableKey = import.meta.env.PUBLIC_SUPABASE_PUBLISHABLE_KEY

export function createServerClient() {
  return createClient(supabaseUrl, supabasePublishableKey)
}

9. Query Supabase data from Astro

Create a new file at src/pages/instruments.astro and populate with the following.

This queries all rows from the instruments table you created earlier and renders them on the page.

astro
---
import { createServerClient } from "../lib/supabase";

const supabase = createServerClient();
const { data: instruments } = await supabase.from("instruments").select();
---

<html>
  <head>
    <title>Instruments</title>
  </head>
  <body>
    <ul>
      {instruments?.map((instrument) => (
        <li>{instrument.name}</li>
      ))}
    </ul>
  </body>
</html>

10. Start the app

Run the development server, go to http://localhost:4321/instruments in your browser of choice to check the list of instruments.

bash
npm run dev

Next steps