First head over to Storyblok and create a space.

Here we need to collect 4 things:

  • Space ID

  • Space Preview Token

  • Personal Access Token (link)

  • Space Region, possible values: "ap", "eu", "us", "ca", "cn"

Now clone our repo and rename the env.txt to .env.

Set up your .env

STORYBLOK_PREVIEW_TOKEN=XXX
STORYBLOK_PERSONAL_TOKEN=XXX
STORYBLOK_SPACE_ID=000
STORYBLOK_REGION=eu
LOCALE=en-US
CURRENCY=USD
SITE_LANG=en

Also add this to your netlify/vercel environment variables.

Install & run dev

$ npm install
$ npm run dev
image

Sync your space

Go to https://localhost:4321/setup .

Now sync your Datasources, Components, and stories. it is best to first delete before syncing.

After this, restart your dev server and you are ready to go.