Brandfine Docs
SDK

Astro adapter

@brandfine/client-astro — thin layer for Astro projects.

The Astro adapter is two convenience helpers around the core SDK. The actual client + caches + resolvers live in @brandfine/client and are framework-agnostic.

npm install @brandfine/client @brandfine/client-astro

What's in it

createBrandfineWebhookRoute

Re-shapes the SDK's (Request) => Response webhook handler into Astro's APIRoute (ctx) => Response shape so you can export it directly:

// src/pages/api/brandfine-webhook.ts
import { createBrandfineWebhookRoute } from '@brandfine/client-astro'

export const prerender = false

export const POST = createBrandfineWebhookRoute({
  secret: import.meta.env.BRANDFINE_WEBHOOK_SECRET,
  onEvent: (...) => { /* ... */ },
})

That's a one-line route file — no middleware, no body parsing, no manual response shaping.

readBrandfineEnv

Reads the three standard env vars (BRANDFINE_API_URL, BRANDFINE_API_KEY, BRANDFINE_WEBHOOK_SECRET) from Vite's import.meta.env with a process.env fallback. Handles the dual-source quirk Astro has between dev (astro dev via Vite) and SSR (Node adapter).

// src/lib/bf.ts
import { createBrandfineClient } from '@brandfine/client'
import { readBrandfineEnv } from '@brandfine/client-astro'

const env = readBrandfineEnv()

export const bf = createBrandfineClient({
  baseUrl: env.apiUrl,
  apiKey: env.apiKey,
})

Returns { apiUrl, apiKey, webhookSecret } — all empty strings when unset (you decide how to react: warn, throw, fall back to hardcoded defaults).

Required Astro setup

For SSR (which the webhook handler requires) you need an adapter — typically @astrojs/node:

// astro.config.mjs
import { defineConfig } from 'astro/config'
import node from '@astrojs/node'

export default defineConfig({
  output: 'static',  // OR 'server' for full SSR
  adapter: node({ mode: 'standalone' }),
})

The webhook route uses export const prerender = false to force SSR on a per-route basis when most of the site is prerendered. Static pages can still be cached via the SDK's in-memory caches; they just refetch on the next request after the webhook fires.

What's not in it (and why)

  • React hooks for client-side fetches — Astro renders on the server. Client-side hydration uses your framework of choice (React, Vue, Svelte). The SDK's server-side caches are what you want.
  • Vite plugin / build-time tooling — Astro's MDX content collections cover this domain. The SDK stays out of build internals.

On this page