- Clone our Starter space by visiting https://app.storyblok.com/#!/build/242426.
- Clone
energyui-storyblok-starter
-Repo by clicking on "Use this template" -> "Create new repository". - 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.
- Click on "Deploy"
- 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:
mkcert
npm
(unless you opt for devcontainer)
- Copy
.env.local.sample
to.env.local
. Replace all placeholders with your specific configuration and adapt to your needs. - If your design system npm package is published on a protected registry,
please configure the auth token in your
~/.npmrc
. - Run a Next.js server process locally:
npm i
npm run dev
- Setup a local proxy server for ssl: (in a new terminal)
mkcert localhost
npx local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem
- In storyblok change the preview URL to "Dev".
- Run
storyblok login
for being able to use the storyblok-cli.
YOUR_WEBSITE
should be the path pointing to your website project, the one you want to update the previews for.
- Clone the Design System this is based on locally: https://github.com/kickstartDS/ds-agency
- 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):yarn
to install dependenciesrm -rf src/token
to remove the existing default themecp -r YOUR_WEBSITE/token src/token
to copy your Design Token / Style Dictionary configuration to the Design System project- Adjust the
background-color
for the.preview--wrapper
CSS class inglobal.scss
, to a color suitable for your component screenshots (depends on your applied design) yarn build-storybook
to build a Storybook that can then be used to create screenshotsyarn create-component-previews
to re-create the existing previews with your brandingmkdir -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 projectcd YOUR_WEBSITE
to switch to your website projectnpm run update-previews
to update those newly created screenshots in your Storyblok space
- That's it!
Generate ts types according to the content schema by running
NEXT_STORYBLOK_SPACE_ID=<your-space-id> npm run generate-content-types
.
When changing the content schema we recommend sticking to Storyblok's Best Practices.
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.
This project is licensed under either of
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.
Join our Discord community for support, or leave an issue on this repository!