Integrating Storybook with SvelteKit
Ads
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.
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
.storybookfolder add a new package.jsonfile. - Add this code snippet to the
package.json - Then in
.storybook/main.jsswitch the requirefor import
- Inside the generated
- "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.jsfile, add the aliases you want to use. The base ones I configured were the $liband $components:
vite: {
resolve: {
alias: {
$lib: path.resolve('./src/lib'),
$components: path.resolve('./src/lib/components'),
},
},
},
- In the
.storybook/main.jsfile, configure the aliases for Webpack. This is my main.jsfile.
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
.sveltefiles of your components to use one of the aliases. I switched Header.svelteimport 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.jsfile. 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!
