Create Storyblok Demo

A CLI to quickly start a project with your favorite framework, already set up with Storyblok, Headless CMS.

Supports Next.js, Nuxt, Gatsby, Vue, React, Astro, Remix, and SvelteKit

Getting Started

1. Signup at https://app.storyblok.com/;
2. Create a new space and retrieve the space preview token under your space in "Settings -> Access Tokens" menu item;
3. Execute the following commands (use your preview access token when prompted when running the npx command):

npx @storyblok/create-demo@latest

cd my-app
npm i && npm run dev

4. Open the Storyblok App following the URL suggested by the output provided by the commands. It depends on the HTTPS configuration and the port used by the frameworks.

CLI Options

The CLI has different options that can be filled, you can see all the options by running npx @storyblok/create-demo --help:

OPTIONS
  -d, --folder=folder                  Folder path for the demo (e.g. my-demo)
  -f, --framework=framework            Framework to use (e.g. astro)
  -h, --help                           show CLI help
  -k, --key=key                        Storyblok Access Token
  -p, --packagemanager=packagemanager  Package manager to use (yarn or npm)
  -r, --region=region                  Space region (e.g. eu-central-1, us-east-1, cn-north-1, ca-central-1, ap-southeast-2)
  -v, --version                        show CLI version

By using this, you can skip the "questions" of the CLI and fill it with your options directly like so:

npx @storyblok/create-demo@latest --key YOUR_STORYBLOK_PREVIEW_TOKEN --region US

Local Development

If you want to contribute, you can run the CLI locally and test it with this command:

npm i
./bin/dev --key YOUR_STORYBLOK_PREVIEW_TOKEN

Framework Options

The framework options can be set in src/lib/frameworks.ts and work in combination with the getting-started or The Ultimate Tutorial repositories:

• name: name of the framework
• value: cli value to use for reference
• start: local command to start the example
• token: space token used in the demo repository
• config: file that has the access token
• bridge: file that is loading the bridge
• public: public folder path for the static files
• port: port the framework starts,
• repositoryUrl: (optional) the URL repository for cloning the template;
• branch: (optional) for setting a specific branches
• https: (optional) if the framework starts with https
• submodules: (optional) if the framework in getting-started is a submodule
• tutorialLink: (optional) - link to the framwork tutorial