New
I18n with StorybookAutomate with Chromatic
Star74,085
Back to Intro to Storybook
Chapters
  • Get started
  • Simple component
  • Composite component
  • Data
  • Screens
  • Deploy
  • Testing
  • Addons
  • Conclusion
  • Contribute

Storybook for Svelte tutorial

Set up Storybook in your development environment
This community translation has not been updated to the latest version of Storybook yet. Help us update it by applying the changes in the English guide to this translation. Pull requests are welcome.

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of the Intro to Storybook tutorial is for Svelte; other editions exist for Vue, Angular, React, React Native and Ember.

Storybook and your app

Set up Svelte Storybook

We'll need to follow a few steps to get the build process set up in our environment. To start with, we want to use degit to set up our build system. Using this package, you can download "templates" (partially built applications with some default configuration) to help you fast track your development workflow.

Let’s run the following commands:

# Create our application:
npx degit chromaui/intro-storybook-svelte-template taskbox

cd taskbox

# Install dependencies
yarn
💡 This template contains the necessary styles, assets and bare essential configurations for this version of the tutorial.

Now we can quickly check that the various environments of our application are working properly:

# Run the test runner (Jest) in a terminal:
yarn test

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 5000:
yarn dev

Our three frontend app modalities: automated test (Jest), component development (Storybook), and the app itself.

3 modalities

Depending on what part of the app you’re working on, you may want to run one or more of these simultaneously. Since our current focus is creating a single UI component, we’ll stick with running Storybook.

Commit changes

At this stage it's safe to add our files to a local repository. Run the following commands to initialize a local repository, add and commit the changes we've done so far.

Copy
git init

Followed by:

Copy
git add .

Then:

Copy
git commit -m "first commit"

And finally:

Copy
git branch -M main

Let's start building our first component!

Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Simple component
Build a simple component in isolation
✍️ Edit on GitHub – PRs welcome!
Join the community
5,772 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI