Astro Supabase Starter

Astro Supabase Starter is a boilerplate template from Netlify that shows how to connect an Astro site to a Supabase database and deploy it on Netlify.

What is Astro Supabase Starter?

Astro Supabase Starter is an open-source boilerplate that demonstrates a working integration between the Astro static-site framework, the Supabase backend-as-a-service, and Netlify hosting. The template takes a new Supabase project as input—including SQL migrations and a seed CSV file—and outputs a deployable Astro site that reads from and writes to that database. It is maintained under the netlify-templates GitHub organization and includes a live demo at https://astro-supabase-starter.netlify.app/.

Key Features

The starter ships with a deployment pipeline, database setup scripts, and a standard Astro toolchain.

• One-click Netlify deployment — The Deploy to Netlify button creates a copy of this repository and immediately configures continuous deployment on Netlify.
• Pre-built Supabase integration — The template works with the Netlify Supabase extension; if you skip the extension, you can set the SUPABASE_DATABASE_URL and SUPABASE_ANON_KEY environment variables in your .env file.
• Database migrations and seed data — The supabase/migrations directory contains SQL scripts, and supabase/seed.csv provides sample rows to import through the Supabase UI.
• Local development through Netlify CLI — Run netlify dev --target-port 4321 to start the Astro dev server with the same runtime as your deployed site.
• Standard Astro commands — Install dependencies with npm install, build to ./dist/ with npm run build, preview with npm run preview, and extend with npm run astro ....
• Tailwind CSS styling — The project is listed with the Tailwind CSS topic, so the starter ships with a utility-first styling setup.
• Node.js v18.14+ requirement — Development requires Node.js version 18.14 or newer, with nvm as an optional version manager.

Who is it for?

This template suits developers and teams who need a working Astro plus Supabase example.

• Astro developers who want a reference implementation for adding Supabase to their projects without starting from scratch.
• Netlify users who need a backend database behind their static site and want to follow the official Netlify + Supabase workflow.
• Full-stack learners who want a minimal, readable codebase that demonstrates migrations, seeds, and environment-based configuration.

What can you do with it?

With this starter you can deploy a database-backed Astro site or use it as a learning reference.

• Launch a prototype fast: Deploy a full-stack Astro app with a Supabase database by clicking the Deploy to Netlify button and running the two SQL/CSV import steps.
• Learn the integration pattern: Study how the template wires Supabase credentials through either the Netlify extension or environment variables, then adapt that pattern to your own projects.
• Build content-driven sites: Use the seeded Supabase database as the data layer for pages that display dynamic content, while Astro handles static rendering.

How does Astro Supabase Starter work?

To run the template locally or in production, you first create a Supabase project and execute the migration SQL from supabase/migrations in the Supabase console. Next, import the contents of supabase/seed.csv to populate tables. After linking your local repo with netlify link, you start the dev server with netlify dev --target-port 4321, or you deploy by pushing to a Netlify-connected repository.

FAQ

Do I need the Netlify Supabase extension?

No. The template was built for the extension, but you can work without it by setting SUPABASE_DATABASE_URL and SUPABASE_ANON_KEY in your .env file.

What Node.js version is required?

You need Node.js v18.14 or later. An optional nvm setup helps manage the version.

How do I deploy to Netlify?

Use the Deploy to Netlify button in the repository README; it creates a new repo with the same files and configures deployment for you. You can also connect your own copy of the repository to a Netlify site.

Where can I get help if something breaks?

The README points to the Netlify Support Forums at https://answers.netlify.com/ for troubleshooting assistance.