​
Installation

To get started with Astro and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter:

Create a new Astro CLI starter project by running the following command:

npx bknd create -i astro

​
Serve the API

Create a new catch-all route at src/pages/api/[...api].ts:

src/pages/api/[...api].ts
import { serve } from "bknd/adapter/astro";

export const prerender = false;

export const ALL = serve({
   connection: {
      // location of your local Astro DB
      // make sure to use a remote URL in production
      url: "file:.astro/content.db"
   }
});

For more information about the connection object, refer to the Database guide. In the special case of astro, you may also use your Astro DB credentials since it’s also using LibSQL under the hood. Refer to the Astro DB documentation for more information.

​
Enabling the Admin UI

Create a new catch-all route at src/pages/admin/[...admin].astro:

src/pages/admin/[...admin].astro
---
import { Admin } from "bknd/ui";
import "bknd/dist/styles.css";

import { getApi } from "bknd/adapter/astro";

const api = await getApi(Astro, { mode: "dynamic" });
const user = api.getUser();

export const prerender = false;
---

<html>
   <body>
      <Admin
         withProvider={{ user }}
         config={{
            basepath: "/admin",
            color_scheme: "dark",
            logo_return_path: "/../"
         }}
         client:only
      />
   </body>
</html>

​
Example usage of the API

You use the API in both static and SSR pages. Just note that on static pages, authentication might not work as expected, because Cookies are not available in the static context.

Here is an example of using the API in static context:

---
import { getApi } from "bknd/adapter/astro";
const api = await getApi(Astro);
const { data } = await api.data.readMany("todos");
---

<ul>
   {data.map((todo) => (
      <li>{todo.title}</li>
   ))}
</ul>

On SSR pages, you can also access the authenticated user:

---
import { getApi } from "bknd/adapter/astro";
const api = await getApi(Astro, { mode: "dynamic" });
const user = api.getUser();
const { data } = await api.data.readMany("todos");

export const prerender = false;
---

{user
   ? <p>Logged in as <b>{user.email}</b>.</p>
   : <p>Not authenticated.</p>}
<ul>
   {data.map((todo) => (
      <li>{todo.title}</li>
   ))}
</ul>

Check the astro repository example for more implementation details or a fully working example using Astro DB.

RemixVite