kickstartDS Storyblok starter

1. Clone our Starter space by visiting https://app.storyblok.com/#!/build/242426.
2. Clone energyui-storyblok-starter-Repo by clicking on "Use this template" -> "Create new repository".
3. Go to Vercel and click on "Add New..." -> "Project". Import your cloned Github Repository. Unfold "Environment Variables" and add the following:
   • NPM_RC with //<your package registry>:_authToken=<your npm token>
   • STORYBLOK_API_TOKEN with a preview token from the cloned Stroyblok Space above.
4. Click on "Deploy"
5. Configure your freshly deployt App as the default preview URL in Storyblok ("Settings" -> "Visual Editor"). Type in the base URL of your deployment and add /preview/ as the path, e.g. https://energyui-storyblok-starter.vercel.app/preview/.

See "Local Development"-Section below for the necessary steps to start developing locally with rapid feedback cycles.

You can use this button to deploy the EnergyUI@Storyblok starter repo on Vercel. Feel free to change the repository URL for quicker deployment of the clone repository:

Deploy your own

Local Development

Dependencies

• mkcert
• npm (unless you opt for devcontainer)

Setup

Locally

1. Copy .env.local.sample to .env.local. Replace all placeholders with your specific configuration and adapt to your needs.
2. If your design system npm package is published on a protected registry, please configure the auth token in your ~/.npmrc.
3. Run a Next.js server process locally:
   1. npm i
   2. npm run dev
4. Setup a local proxy server for ssl: (in a new terminal)
   1. mkcert localhost
   2. npx local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem
5. In storyblok change the preview URL to "Dev".
6. Run storyblok login for being able to use the storyblok-cli.

Creating branded component and preset previews

YOUR_WEBSITE should be the path pointing to your website project, the one you want to update the previews for.

1. Clone the Design System this is based on locally: https://github.com/kickstartDS/ds-agency
2. Switch to the freshly cloned directory, and inside (ensure you're using the correct Node version 18+; nvs use, nvm use for automatic selection, if you use one of those tools):
   1. yarn to install dependencies
   2. rm -rf src/token to remove the existing default theme
   3. cp -r YOUR_WEBSITE/token src/token to copy your Design Token / Style Dictionary configuration to the Design System project
   4. Adjust the background-color for the .preview--wrapper CSS class in global.scss, to a color suitable for your component screenshots (depends on your applied design)
   5. yarn build-storybook to build a Storybook that can then be used to create screenshots
   6. yarn create-component-previews to re-create the existing previews with your branding
   7. mkdir -p YOUR_WEBSITE/public/img && rm -rf YOUR_WEBSITE/public/img/screenshots && cp -r static/img/screenshots YOUR_WEBSITE/public/img/ to copy the generated screenshots to your project
   8. cd YOUR_WEBSITE to switch to your website project
   9. npm run update-previews to update those newly created screenshots in your Storyblok space
3. That's it!

Working with the content schema

Typescript Support

Generate ts types according to the content schema by running NEXT_STORYBLOK_SPACE_ID=<your-space-id> npm run generate-content-types.

Migrations

When changing the content schema we recommend sticking to Storyblok's Best Practices.

Contributing

Contributions are welcome. Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as below, without any additional terms or conditions.

License

This project is licensed under either of

• Apache License, Version 2.0 (LICENSE-APACHE)
• MIT license (LICENSE-MIT)

at your option.

The SPDX license identifier for this project is MIT OR Apache-2.0.

---

For more information and updates, please visit the project's GitHub repository.

Support

Join our Discord community for support, or leave an issue on this repository!