Get started with Astro and BaseHub.

Astro is a framework for performant, content-driven websites. With it, you can use almost any UI library you want to (React, Vue, Svelte, etc).

The main difference that the setup Astro has vs Next.js is in the way it exposes environment variables.

While in Next.js, process.env.BASEHUB_TOKEN is available for our SDK to use, in Vite-powered frameworks (like Astro), you’ll need to explicitly pass the token via params as you’ll see below.

Set Up basehub

Our official JavaScript/TypeScript library exposes a CLI generator that, when run, will generate a type-safe GraphQL client. Check out our API Reference for more information.


Install with your preferred package manager.

npm i basehub
pnpm i basehub
yarn add basehub

Add the BASEHUB_TOKEN Environment Variable2

Get it from your BaseHub Repo’s README.


# Remember to also add this ^ env var in your deployment platform

Configure Node Scripts3

In order to generate the BaseHub SDK, we recommend running basehub dev in parallel to running the development server, and basehub right before building the app.

"scripts": {
  "dev": "basehub dev & astro dev",
  "start": "basehub dev & astro dev",
  "build": "basehub && astro check && astro build",
  "preview": "astro preview",
  "astro": "astro"

Start the Dev Server4

Give it a go to make sure the set up went correctly.

npm run dev
pnpm dev
yarn dev

Your First Query

Now, let’s go ahead and query some content!

import { basehub } from 'basehub'

const data = await basehub({
	token: import.meta.env.BASEHUB_TOKEN
	__typename: true,
	_sys: {
        id: true

<html lang="en">
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<pre><code>{JSON.stringify(data, null, 2)}</code></pre>

Support Table

While you can query BaseHub contenet from SvelteKit, there are some DX features that are not supported.




<Pump />

<RichText />

✅ (with React)



✅ (with React)