Astro

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.

Install1

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.

.env

BASEHUB_TOKEN="<your-token>"

# 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.

package.json

"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!

src/pages/index.astro

---
import { basehub } from 'basehub'

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

<html lang="en">
	<head>
		<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} />
		<title>Astro</title>
	</head>
	<body>
		<pre><code>{JSON.stringify(data, null, 2)}</code></pre>
	</body>
</html>

Support Table

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

Feature	Supported
`basehub()`	✅
`<Pump />`	❌
`<RichText />`	✅ (with React)
Analytics	✅
Search	✅ (with React)