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 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 & 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 dev

pnpm dev

yarn dev

Your 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
}

<script>
	/** @type {import('./$types').PageData} */
	export let data;
</script>

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

Feature	Supported
`basehub()`	✅
`<Pump />`	❌
`<RichText />`	❌
Analytics	✅
Search	✅ (just the client, not the UI helpers)