Svelte + Vite, Storybook 7 with Svelte Native Format & Tailwind CSS - Starter Template again! 😀

GitHub repository for this Starter Template - Github Repo, do show some love with ⭐. Please note that I'll be creating a new template with SvelteKit soon.

Please visit the sample website created using this repo and its corresponding UI Doc.

Svelte and its ecosystem has grown drastically in the past few years since I had created this template and I'm updating it with the latest and greatest, again, so that you can get started with your project without any fuss.

Things I've included in this project this time:

1. Svelte - 3.55
2. Vite - 4.1
3. Storybook 7 with Svelte Native Format
4. Tailwind CSS - 3.2
5. Eslint, Prettier, Stylelint and EditorConfig

You will still see react and react-dom as part of dependencies for Storybook. I think this will not change much in the near future, there are other alternatives that have come out with native Svelte support like Historie, ViteBook, and Kitbook. I still would use Storybook because I can still use a familiar tool for all other frameworks. I'll be adding new templates with Historie and Vitebook soon!

Quickstart with this template

# Clone the repo
npx degit jerriclynsjohn/svelte-storybook-tailwind#main my-project
cd my-project

# Install dependencies
npm i 

# Run both the app and storybook in dev mode
npm run dev
npm run storybook

# Run production build
npm run build
npm run build-storybook

Even though the steps to create this repo has considerably gone down, the effort is not trivial. We still need to run around and figure out the configurations that needs to go in to stitch it all up.

Svelte moving to Vite was the best thing ever happened in a long time when it comes to its DX and ever since Storybook introduced a new CSF format, Svelte community was the first to cry out that the story format is moving away from Svelte Native Format, but with @storybook/addon-svelte-csf we are able to retain the native feel of write Svelte stories. I mean if we cant use <slot /> then what's the point? So, Svelte Native Format it is!

If you are interested in what I did to build this template then read on.

Apology in advance for the lack of inline code in those lists, apparently Dev.to doesn't support it, so I'll be using "" !

Steps to create the template

1. Create a Svelte based Vite app

• Initiate the project using "npm create vite@latest".
• Select Svelte + Javascript from the CLI.
• You have a basic Svelte + Vite app ready.

2. Add Tailwind CSS to the project

• Install dependencies "npm install -D tailwindcss postcss autoprefixer".
• Instantiate the tailwind and postcss config files using "npx tailwindcss init -p".
• Update "tailwind.config.cjs" as shown below to accommodate for the Svelte components.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./index.html', './src/**/*.{svelte,js,ts}'],
    theme: {
        extend: {}
    },
    plugins: []
};
``;

• Add Tailwind directive to your CSS at "./src/index.css"

@tailwind base;
@tailwind components;
@tailwind utilities;

• Import CSS into "./src/main.js"

import './index.css';
import App from './App.svelte';

const app = new App({
    target: document.getElementById('app')
});

export default app;

• That's it, now we have integrated Tailwind CSS. Go ahead and run the project and try editing the background color of a button to see the awesome DX provided by both Tailwind CSS JIT and Vite.

3. Add Storybook and make it love Svelte Native Format

• Instantiate by running "npx storybook@next init"
• Hook up Tailwind CSS by importing the CSS into "./.storybook/preview.js"

import '../src/index.css';

export const parameters = {
    backgrounds: {
        default: 'light'
    },
    actions: {argTypesRegex: '^on[A-Z].*'},
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/
        }
    }
};

• Lets hook up Svelte Native Format by installing an addon "npm i -D @storybook/addon-svelte-csf"
• Let's add the addon to "./.storybook/main.js"

/** @type { import('@storybook/svelte-vite').StorybookConfig } */
const config = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: [
        '@storybook/addon-svelte-csf',
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions'
    ],
    framework: {
        name: '@storybook/svelte-vite',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    }
};
export default config;

• Now the project will support Svelte Native Format and its ready to go.

Please feel to make use of this template for your upcoming project, and do let me know how I can improve this going forward. I'm thinking of a monorepo for most Svelte based templates and have a CLI that can help bootstrap templates.

Rock n' Rollll !!!

Comments

[Hugo Pineda]

This doesn't work anymore, it complains about the framework:

Error: We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
Please use the @storybook/sveltekit framework instead.
You can migrate automatically by running

npx storybook@latest automigrate

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework

Switching to name: '@storybook/sveltekit', kinda works, stories load, but not all tailwind classes work