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

---
title: 'Use Supabase with Astro'
subtitle: 'Learn how to create a Supabase project, add sample data, and query from an Astro app.'
breadcrumb: 'Framework Quickstarts'
---

<$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 Agent Skills (optional)

Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

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 name=astro.config.mjs
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](/dashboard/project/_?showConnect=true&framework=astro&tab=frameworks):

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

```text name=.env.local
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 name=src/lib/supabase.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 name=src/pages/instruments.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

- Explore [drop-in UI components](/ui) for your Supabase app
- 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)