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 basehubAdd the BASEHUB_TOKEN Environment Variable2
Get it from your BaseHub Repo’s README.
BASEHUB_TOKEN="<your-token>"
# Remember to also add this ^ env var in your deployment platformConfigure 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 devYour 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
}).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 content from Astro, there are some DX features that are not supported.