Storybook for Svelte tutorial

Setup Storybook in your development environment

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 Learn Storybook is for Svelte; other editions exist for Vue, Angular, React, React Native and Ember.

Storybook and your app

Setup Svelte Storybook

We’ll need to follow a few steps to get the build process set up in your environment. To start with, we want to use degit to setup our build system, and enable Storybook and Jest testing in our created app. Let’s run the following commands:

# Create our application:
npx degit sveltejs/template taskbox

cd taskbox

# Install the dependencies
npm install

# Add Storybook:
npx -p @storybook/cli sb init --type svelte

Setup Jest with Svelte

We have two out of three modalities configured in our app, but we still need one, we need to setup Jest to enable testing.

Run the following commands:

npm install -D jest @testing-library/svelte jest-transform-svelte @testing-library/jest-dom

Create a new folder called __mocks__, with two files inside:

  • The first one called fileMock.js with the following content:

    module.exports = 'file-stub';
    
  • The second one called styleMock.js with the following content:

    module.exports = {};
    

Create a .babelrc file in the root of the project with the following:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Add a new field to package.json:

{
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": "jest-transform-svelte"
    },
    "moduleFileExtensions": ["js", "svelte", "json"],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss|stylesheet)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
    "testPathIgnorePatterns": ["/node_modules/", "/build/", "/storybook-static/"]
  }
}

And a new script is required to run Jest:

{
  "scripts": {
    "test": "jest --watchAll"
  }
}
The usage of the flag `--watchAll` in the script is to prevent a error being thrown by Jest, because at this stage there's still no repository configured. That will be addressed later on.

To make sure everything is working properly we need to create a test file. In the src folder, add a file called Sample.test.js with the following:

// src/Sample.test.js

import App from './App.svelte';
import { render } from '@testing-library/svelte';

test('App', () => {
  const { getByText } = render(App, {
    props: {
      name: 'World',
    },
  });

  expect(getByText('Hello World!')).toBeInTheDocument();
});

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

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

# Start the component explorer on port 6006:
npm run storybook

# Run the frontend app proper on port 5000:
npm run 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.

Reuse CSS

Taskbox reuses design elements from the GraphQL and React Tutorial example app, so we won’t need to write CSS in this tutorial. Copy and paste this compiled CSS into the src/index.css file.

Taskbox UI

If you want to modify the styling, the source LESS files are provided here.

Add assets

To match the intended design, you'll need to download both the font and icon directories and place them inside the src/assets folder. Issue the following commands in your terminal:

npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
We use degit to download folders from GitHub. If you want to do it manually, you can grab them here.

Finally we need to update our storybook script to serve the public directory (in package.json):

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"
  }
}

After adding styling and assets, the app will render a bit strangely. That’s OK. We aren’t working on the app right now.

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.

$ git init

Followed by:

$ git add .

And finally:

$ git commit -m "first commit"

Let's start building our first component!

Next Chapter
Simple component
Build a simple component in isolation