dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Docs: add astro quickstart (#44488)

Browse Source 
## 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

<img width="1385" height="561" alt="Screenshot 2026-04-02 at 15 14 39"
src="https://github.com/user-attachments/assets/e86f64d3-a918-4bd4-8124-b3cb441e1217"
/>

<img width="1" height="1" alt="Screenshot 2026-04-02 at 10 44 32"
src="https://github.com/user-attachments/assets/5f1fbe87-4f4b-4e3d-a292-eca914735c38"
/>

## Additional context

N/A


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
This commit is contained in:
Fatuma AbdullahiCopilotJeremias MenichelliChris ChinchillaChris Chinchilla
 authored and GitHub committed 2026-04-16 10:13:14 +02:00
1 parent bc13eb56ac
commit 1ca21fc568
5 files changed
+210
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/HomePageCover.tsx
+6
View File
@@ -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',
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+4
View File
@@ -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',
apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
+192
View File
@@ -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
---
<StepHikeCompact>
<StepHikeCompact.Step step={1}>
<$Partial path="quickstart_db_setup.mdx" />
</StepHikeCompact.Step>
<StepHikeCompact.Step step={2}>
<StepHikeCompact.Details title="Create an Astro app">
- Create an Astro app using the `npm create` command.
<$Partial path="uiLibCta.mdx" />
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npm create astro@latest my-app
cd my-app
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Install Supabase client library and Node adapter">
Install the `supabase-js` client library and the `@astrojs/node` adapter to enable server-side rendering.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npm install @supabase/supabase-js @astrojs/node
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Configure Astro for SSR">
Update your `astro.config.mjs`.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```js name=astro.config.mjs
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
export default defineConfig({
output: "server",
adapter: node({
mode: "standalone",
}),
});
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={5}>
<StepHikeCompact.Details title="Declare Supabase Environment Variables">
Create a `.env.local` file and populate with your Supabase connection variables:
<ProjectConfigVariables variable="url" />
<ProjectConfigVariables variable="publishable" />
</StepHikeCompact.Details>
<StepHikeCompact.Code>
<$CodeTabs>
```text name=.env.local
PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
```
</$CodeTabs>
<$Partial path="api_settings_steps.mdx" variables={{ "framework": "astro", "tab": "frameworks" }} />
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={6}>
<StepHikeCompact.Details title="Create a Supabase client helper">
Create a utility file to initialize the Supabase client:
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```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
);
}
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={7}>
<StepHikeCompact.Details title="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 in Supabase and renders them on the page.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```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>
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={8}>
<StepHikeCompact.Details title="Start the app">
Run the development server, go to http://localhost:4321/instruments in your browser of choice to check the list of instruments.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npm run dev
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
</StepHikeCompact>
## 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)
apps/docs/public/img/icons/astro-icon-light.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="85" height="107" viewBox="0 0 85 107" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.5893 91.1365C22.7555 86.7178 21.3443 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4374 78.2199 52.0358 77.7822 59.2231 74.2459C60.0453 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.3179 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6844 102.089C39.2086 99.8193 38.5065 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5893 91.1365Z" fill="#17191E"/>
<path d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" fill="#17191E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

apps/docs/public/img/icons/astro-icon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="85" height="107" viewBox="0 0 85 107" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.5893 91.1365C22.7555 86.7178 21.3443 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4374 78.2199 52.0358 77.7822 59.2231 74.2459C60.0453 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.3179 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6844 102.089C39.2086 99.8193 38.5065 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5893 91.1365Z" fill="white"/>
<path d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB