SvelteKit
Get started with SvelteKit and BaseHub.
SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.
The main difference that the setup SvelteKit 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 SvelteKit), 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 & vite dev",
"build": "basehub && vite build",
"preview": "vite preview",
... rest scripts
},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 type { PageServerLoad } from "./$types"
import { basehub } from "basehub"
import { BASEHUB_TOKEN } from "$env/static/private"
export const load: PageServerLoad = async () => {
const now = Date.now()
const data = await basehub({ token: BASEHUB_TOKEN }).query({
__typename: true,
_sys: {
id: true,
},
})
return data
}Support Table
While you can query BaseHub content from SvelteKit, there are some DX features that are not supported.