npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@storyblok/create-demo

v1.2.2

Published

A CLI tool for quickly starting a Storyblok project

Downloads

354

Readme

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