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
- Signup at https://app.storyblok.com/;
- Create a new space and retrieve the space preview token under your space in "Settings -> Access Tokens" menu item;
- 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
- 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.
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
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
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 frameworkvalue
: cli value to use for referencestart
: local command to start the exampletoken
: space token used in the demo repositoryconfig
: file that has the access tokenbridge
: file that is loading the bridgepublic
: public folder path for the static filesport
: port the framework starts,repositoryUrl
: (optional) the URL repository for cloning the template;branch
: (optional) for setting a specific brancheshttps
: (optional) if the framework starts with httpssubmodules
: (optional) if the framework ingetting-started
is a submoduletutorialLink
: (optional) - link to the framwork tutorial