Integrating Storybook with SvelteKit

Original: https://codingcat.dev/tutorial/integrating-storybook-with-sveltekit

Intro

This is the new Svelte Sirens, Sirens Streams, a live stream every 2 weeks featuring a new technology with SvelteKit. On January 19th, we have Shadid Haque coming to teach us how to ingrate a GraphQL Database with FaunaDB.

• TLDR: Skip to full working code - Storybook-Tailwind-SvelteKit

Aliases and Tailwind

I wanted to put this towards the top to not torture you with this. We struggled during the live stream, fighting storybook's webpack setup with the vite setup of SK. One of the amazing Svelte Discord community members showed us after how they got it done. So, I'm going to go through step by step, what I did to go from nothing to a fully working Storybook & Tailwind project in SvelteKit with aliases functional.

Steps

• New SvelteKit project - npm init svelte@next storybook-sveltekit

• Change directory into your project cd storybook-sveltekit

• Install dependencies - npm i

• Install storybook - npx sb@next init

• Try running to see errors - npm run storybook

• Fix storybook errors.

  • Inside the generated .storybook folder add a new package.json file.

  • Add this code snippet to the package.json

  • Then in .storybook/main.js switch the require for import

- "preprocess": require("../svelte.config.js").preprocess
+ "preprocess": import("../svelte.config.js").preprocess

That's it for the initial setup, Storybook should now be able to run with npm run storybook. Next we'll get the aliases fixed.

Steps to fix aliases

• In the svelte.config.js file, add the aliases you want to use. The base ones I configured were the $lib and $components:

 vite: {
      resolve: {
        alias: {
          $lib: path.resolve('./src/lib'),
          $components: path.resolve('./src/lib/components'),
        },
      },
    },

• In the .storybook/main.js file, configure the aliases for Webpack. This is my main.js file.

const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-svelte-csf',
    {
      name: '@storybook/addon-postcss',
      options: {
          postcssLoaderOptions: {
              implementation: require('postcss')
          }
      }
  }
  ],
  framework: '@storybook/svelte',
  svelteOptions: {
    preprocess: import('../svelte.config.js').preprocess,
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
        test: [/\.stories\.js$/, /index\.js$/],
        use: [require.resolve('@storybook/source-loader')],
        include: [path.resolve(__dirname, '../src')],
        enforce: 'pre'
    });
    config.resolve.alias = {
        ...config.resolve.alias,
        $lib: path.resolve(__dirname, '../src/lib'),
        $components: path.resolve(__dirname, '../src/lib/components')
    };
    return config;
},
    core: {
            builder: 'webpack4'
    }
}

• Try switching out your imports in the .svelte files of your components to use one of the aliases. I switched Header.svelte import to import Button from '$components/Button/Button.svelte.

• Run Storybook - npm run storybook

Tailwind

We'll be using svelte-add to add Tailwind to the project and then do the steps to get it working inside Storybook.

• Add tailwind to the project - npx svelte-add@latest tailwindcss

• Install dependencies - npm i

• Add some tailwind to any of the css files. I changed the primary button css to use tailwind with @apply bg-teal-400 text-white;

• Install storybook's postcss addon npm i -D @storybook/addon-postcss.

• Add the config to the .storybook/main.js file. The final output is below.

const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-svelte-csf',
    {
      name: '@storybook/addon-postcss',
      options: {
          postcssLoaderOptions: {
              implementation: require('postcss')
          }
      }
  }
  ],
  framework: '@storybook/svelte',
  svelteOptions: {
    preprocess: import('../svelte.config.js').preprocess,
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
        test: [/\.stories\.js$/, /index\.js$/],
        use: [require.resolve('@storybook/source-loader')],
        include: [path.resolve(__dirname, '../src')],
        enforce: 'pre'
    });
    config.resolve.alias = {
        ...config.resolve.alias,
        $lib: path.resolve(__dirname, '../src/lib'),
        $components: path.resolve(__dirname, '../src/lib/components')
    };
    return config;
},
core: {
    builder: 'webpack4'
}
}

• Import the tailwind CSS file inside .storybook/preview.js, mine was import '../src/app.css'.

• Try it out - npm run storybook

Lessons learned

There are still a few things Storybook has to get running easier with ESM. There is still an open issue with the addon-svelte-csf at the time of writing. Overall though, we were able to get a SvelteKit project up and running with Storybook and Tailwind integrated and aliases working. As always, you can find me on Twitter, Coding Cat Discord or the Svelte Discord. Later!