Hi Folks π This repository contains a simple example of a SvelteKit (with Svelte 5) project integrated with Storyblok and the Storyblok Visual Editor.
In this README, you'll find the necessary information to clone the project and configure it with your Storyblok Space.
If you're interested in learning more about the process of setting up a base project with SvelteKit and Storyblok, check out this article: https://dev.to/robertobutti/integrating-sveltekit-with-storyblok-using-svelte-5-384p
Clone the repository:
git clone https://github.com/roberto-butti/svelte5-storyblok-example.git
Then create the .env
file with these three parameters:
PUBLIC_ACCESS_TOKEN=youraccesstoken
PUBLIC_REGION=eu
PUBLIC_VERSION=draft
The .env
file stores environment variables needed for Storyblok integration. Hereβs what each parameter does:
PUBLIC_ACCESS_TOKEN
β Your Storyblok API access token, required to fetch content. Replace youraccesstoken
with your actual token.PUBLIC_REGION
β Specifies the Storyblok region (eu
for Europe, us
for the United States).PUBLIC_VERSION
β Defines the content version to fetch. Use draft
for real-time previews or published
for live content.You can create your Storyblok space and pick the Preview Access Token.
Then you can install all the SvelteKit dependencies via bun install
(or npm install
or pnpm install
or yarn
)
Then you can run the local server:
bun dev
Then open your browser at https://localhost:5173/
To create a Storyblok space, and get the proper access token you can read this tutorial: https://dev.to/robertobutti/how-to-set-up-a-storyblok-space-with-the-community-plan-for-local-development-1i37
To create a production version of your SvelteKit project:
bun build
You can preview the production build with bun preview
.
You may need to install an adapter for your target environment to deploy your app.