Use Voltbase with Astro

Create a Voltbase project, add sample data, and query it from an Astro site.

1. Create a Voltbase project

Sign up or sign in
Create an organization and a project
Open API and copy the Project URL, anon key, and (for server-only writes) the service role key

You can also create projects from the dashboard after signing in — no CLI required for this quickstart.

2. Set up your database

In the dashboard, open Database and create a instruments table (or run SQL):

schema.sql

create table instruments (
  id bigint generated always as identity primary key,
  name text not null
);

insert into instruments (name)
values ('violin'), ('viola'), ('cello');

alter table instruments enable row level security;

create policy "public read"
on instruments for select
to anon
using (true);

Why RLS?

With a public SELECT policy for anon, the browser anon key can read rows. Writes still need auth policies or the service role on the server.

3. Create a Astro app

terminal

npm create astro@latest voltbase-astro
cd voltbase-astro
npm install

4. Declare environment variables

Create .env at the project root and paste your dashboard values:

.env

PUBLIC_VOLTBASE_URL=https://YOUR_API/api/projects/YOUR_SLUG
PUBLIC_VOLTBASE_ANON_KEY=your-anon-key

Astro exposes PUBLIC_* to the client. Server-only secrets should omit the prefix.

Keep the service role server-only

Never put the service role key in client bundles. Use the anon key in the browser; use the service role only in server routes, Server Components, or backend jobs.

5. Create a Voltbase client

Install the SDK, then add a small helper:

terminal

npm install voltbase-js

src/lib/voltbase.ts

import { createClient } from 'voltbase-js';

export const voltbase = createClient(
  import.meta.env.PUBLIC_VOLTBASE_URL,
  import.meta.env.PUBLIC_VOLTBASE_ANON_KEY,
);

6. Query Voltbase from Astro

Fetch rows from instruments and render them:

src/pages/index.astro

---
import { voltbase } from '../lib/voltbase';

const { data: instruments, error } = await voltbase
  .from('instruments')
  .select('id, name')
  .order('id', 'asc');
---

<html lang="en">
  <body>
    {error ? (
      <p>Failed to load: {error.message}</p>
    ) : (
      <ul>
        {instruments?.map((row) => <li>{row.name}</li>)}
      </ul>
    )}
  </body>
</html>

Next: Auth, Realtime, or the Todo + RLS example.