From 1ca21fc568e372ad5f1db99dbe64e68bedc732bd Mon Sep 17 00:00:00 2001
From: Fatuma Abdullahi <67555014+FatumaA@users.noreply.github.com>
Date: Thu, 16 Apr 2026 11:13:14 +0300
Subject: [PATCH] Docs: add astro quickstart (#44488)
## 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 to include an Astro Quickstart Guide
## What is the current behavior?
No Astro quickstart guide
## What is the new behavior?
Added the Astro guide
## Additional context
N/A
## Summary by CodeRabbit
* **New Features**
* Added Astro.js to the Getting Started framework list, home page
framework grid, and main navigation under Framework Quickstarts.
* **Documentation**
* Added an Astro quickstart guide: 8-step setup covering project
creation, package installation, server-side configuration, env vars,
example server-side Supabase usage, running the dev server, and links to
next steps.
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jeremias Menichelli
Co-authored-by: Chris Chinchilla
Co-authored-by: Chris Chinchilla
---
apps/docs/components/HomePageCover.tsx | 6 +
.../NavigationMenu.constants.ts | 4 +
.../getting-started/quickstarts/astrojs.mdx | 192 ++++++++++++++++++
.../public/img/icons/astro-icon-light.svg | 4 +
apps/docs/public/img/icons/astro-icon.svg | 4 +
5 files changed, 210 insertions(+)
create mode 100644 apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
create mode 100644 apps/docs/public/img/icons/astro-icon-light.svg
create mode 100644 apps/docs/public/img/icons/astro-icon.svg
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index 9cb35f649c9..c67af16ecfb 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -62,6 +62,12 @@ const HomePageCover = (props) => {
href: '/guides/getting-started/quickstarts/tanstack',
hasLightIcon: true,
},
+ {
+ tooltip: 'Astro.js',
+ icon: '/docs/img/icons/astro-icon',
+ href: '/guides/getting-started/quickstarts/astrojs',
+ hasLightIcon: true,
+ },
{
tooltip: 'Vue',
icon: '/docs/img/icons/vuejs-icon',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index ff0742cc492..dbebd1e9a0e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -341,6 +341,10 @@ export const gettingstarted: NavMenuConstant = {
name: 'React',
url: '/guides/getting-started/quickstarts/reactjs',
},
+ {
+ name: 'Astro',
+ url: '/guides/getting-started/quickstarts/astrojs',
+ },
{
name: 'Nuxt',
url: '/guides/getting-started/quickstarts/nuxtjs',
diff --git a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
new file mode 100644
index 00000000000..1dd467b0fb3
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
@@ -0,0 +1,192 @@
+---
+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'
+hideToc: false
+---
+
+
+
+
+
+ <$Partial path="quickstart_db_setup.mdx" />
+
+
+
+
+
+
+
+ - Create an Astro app using the `npm create` command.
+
+ <$Partial path="uiLibCta.mdx" />
+
+
+
+
+
+ ```bash name=Terminal
+ npm create astro@latest my-app
+ cd my-app
+ ```
+
+
+
+
+
+
+
+
+ Install the `supabase-js` client library and the `@astrojs/node` adapter to enable server-side rendering.
+
+
+
+
+
+ ```bash name=Terminal
+ npm install @supabase/supabase-js @astrojs/node
+ ```
+
+
+
+
+
+
+
+
+ Update your `astro.config.mjs`.
+
+
+
+
+
+ ```js name=astro.config.mjs
+ import { defineConfig } from "astro/config";
+ import node from "@astrojs/node";
+
+ export default defineConfig({
+ output: "server",
+ adapter: node({
+ mode: "standalone",
+ }),
+ });
+ ```
+
+
+
+
+
+
+
+
+ Create a `.env.local` file and populate with your Supabase connection variables:
+
+
+
+
+
+
+
+
+ <$CodeTabs>
+
+ ```text name=.env.local
+ PUBLIC_SUPABASE_URL=
+ PUBLIC_SUPABASE_PUBLISHABLE_KEY=
+ ```
+
+
+
+ <$Partial path="api_settings_steps.mdx" variables={{ "framework": "astro", "tab": "frameworks" }} />
+
+
+
+
+
+
+
+
+ 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
+ );
+ }
+ ```
+
+
+
+
+
+
+
+
+ Create a new file at `src/pages/instruments.astro` and populate with the following.
+
+ This queries all rows from the `instruments` table in Supabase 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();
+ ---
+
+
+
+ Instruments
+
+
+
+ {instruments?.map((instrument) => (
+
{instrument.name}
+ ))}
+
+
+
+ ```
+
+
+
+
+
+
+
+
+ Run the development server, go to http://localhost:4321/instruments in your browser of choice to check 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/public/img/icons/astro-icon-light.svg b/apps/docs/public/img/icons/astro-icon-light.svg
new file mode 100644
index 00000000000..e52118199d5
--- /dev/null
+++ b/apps/docs/public/img/icons/astro-icon-light.svg
@@ -0,0 +1,4 @@
+
diff --git a/apps/docs/public/img/icons/astro-icon.svg b/apps/docs/public/img/icons/astro-icon.svg
new file mode 100644
index 00000000000..798ff7463ca
--- /dev/null
+++ b/apps/docs/public/img/icons/astro-icon.svg
@@ -0,0 +1,4 @@
+