DEV Community: Jerric Lyns John

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

Jerric Lyns John — Wed, 22 Feb 2023 23:17:30 +0000

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:

Svelte - 3.55
Vite - 4.1
Storybook 7 with Svelte Native Format
Tailwind CSS - 3.2
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 !!!

Svelte + Tailwind + Storybook Starter Template

Jerric Lyns John — Sun, 01 Sep 2019 11:19:58 +0000

This blog is pretty outdated and I've created an updated one here. Svelte ecosystem has matured a lot that, we really don't have to do a lot of complex configurations to get going, but its still not trivial. Again the content of this blog is outdated. Visit the updated one here.

First of all, here's the link to the Github repo, go ahead and start working on your project than fiddle with the configurations. Trust me that takes a hell lot of time.

Visit this website to see the outcome: Svelte + TailwindCSS + Storybook

// Quickstart

npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project
cd my-svelte-project

yarn
yarn dev
yarn stories

Svelte and TailwindCSS is an awesome combination for Frontend development, but sometimes the setup seems a bit non intuitive, especially when trying to try out this awesome combination. When integrating Storybook, which is another awesome tool for UI Component development and documentation, there is no obvious place to get how it's done. This repo was made to address just that!

You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.

What do you get in this repo

A fully functional Svelte + TailwindCSS integration with side-by-side implementation of independent Storybook
Storybook with 5 essential Addons
Storybook populated with basic examples of Svelte + TailwindCSS

Addons

Accessibility Addon

Accessibility Addon - Colorblindness Emulation

Actions Addon

Notes Addon

Source Addon

Viewport Addon

Svelte + TailwindCSS + Storybook

Storybook is an open source tool for developing JavaScript UI
components in isolation

Svelte is a component framework that allows you to write highly-efficient,
imperative code, that surgically updates the DOM to maintain performance.

TailwindCSS is a highly customizable, low-level CSS framework that gives
you all of the building blocks you need to build bespoke designs without any annoying opinionated
styles you have to fight to override.

Steps to build

Clone this repo git clone https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git
Go to the directory cd svelte-storybook-tailwind
Install dependencies yarn
To develop your Svelte App: yarn dev
To develop UI components independent of your app: yarn stories

Documentations

Svelte - API and Tutorial
TailwindCSS - Docs and Tutorial
Storybook - Docs and Tutorial (No Svelte Yet!)

Steps to build it all by yourself and some tips [Warning: It's lengthy]

Instantiate Svelte App

Start the template file using npx degit sveltejs/template svelte-storybook-tailwind
Go to the directory cd svelte-storybook-tailwind
Install dependencies yarn
Try run the svelte app yarn dev

Add Tailwind into the project

Install dependencies: yarn add -D tailwindcss @fullhuman/postcss-purgecss autoprefixer postcss postcss-import svelte-preprocess rollup-plugin-postcss
Add utils.css in srcand add this:


/* Import Tailwind as Global Utils */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import this into the main.js import './utils.css'
Change the rollup config as shown:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js',
    },
    plugins: [
        svelte({
            preprocess: autoPreprocess({
                postcss: true,
            }),
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
        }),
        postcss({
            extract: 'public/utils.css',
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration —
        // consult the documentation for details:
        // https://github.com/rollup/rollup-plugin-commonjs
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'),
        }),
        commonjs(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
};

Add tailwind config using the command npx tailwind init
Add PostCSS config ./postcss.config.js as follows:

const production = !process.env.ROLLUP_WATCH;
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
    plugins: [
        require('postcss-import')(),
        require('tailwindcss'),
        require('autoprefixer'),
        production &&
            purgecss({
                content: ['./**/*.html', './**/*.svelte'],
                defaultExtractor: content => {
                    const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g);

                    const matchedTokens = [];

                    let match = regExp.exec(content);
                    // To make sure that you do not lose any tailwind classes used in class directive.
                    // https://github.com/tailwindcss/discuss/issues/254#issuecomment-517918397
                    while (match) {
                        if (match[0].startsWith('class:')) {
                            matchedTokens.push(match[0].substring(6));
                        } else {
                            matchedTokens.push(match[0]);
                        }

                        match = regExp.exec(content);
                    }

                    return matchedTokens;
                },
            }),
    ],
};

Remove global.css from public folder and then remove the reference from index.html
Build the project with some TailwindCSS utilities yarn dev

Add Storybook into the Svelte Project

Add Storybook dependencies yarn add -D @storybook/svelte
Add 5 commonly used Storybook Addons:
- Source: yarn add -D @storybook/addon-storysource
- Actions: yarn add -D @storybook/addon-actions
- Notes: yarn add -D @storybook/addon-notes
- Viewport: yarn add -D @storybook/addon-viewport
- Accessibility: yarn add @storybook/addon-a11y --dev
Create an addon file at the root .storybook/addons.js with the following content and keep

adding additional addons in this file.

import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-a11y/register';

Create a config file at the root .storybook/config.js with the following content:

import { configure, addParameters, addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';

// automatically import all files ending in *.stories.js
const req = require.context('../storybook/stories', true, /\.stories\.js$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
addDecorator(withA11y);
addParameters({ viewport: { viewports: newViewports } });

Add tailwind configs in the webpack.config.js under .storybook and also accommodate for Source addon:

const path = require('path');

module.exports = ({ config, mode }) => {
    config.module.rules.push(
        {
            test: /\.css$/,
            loaders: [
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        config: {
                            path: './.storybook/',
                        },
                    },
                },
            ],

            include: path.resolve(__dirname, '../storybook/'),
        },
        //This is the new block for the addon
        {
            test: /\.stories\.js?$/,
            loaders: [require.resolve('@storybook/addon-storysource/loader')],
            include: [path.resolve(__dirname, '../storybook')],
            enforce: 'pre',
        },
    );

    return config;
};

Create the postcss.config.js under .storybook:

var tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        require('postcss-import')(),
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer'),
    ],
};

Make sure you have babel and svelte-loader dependencies yarn add -D babel-loader @babel/core svelte-loader
Add npm script in your package.json

{
    "scripts": {
        // Rest of the scripts
        "stories": "start-storybook",
        "build-stories": "build-storybook"
    }
}

Add a utils.css file under storybook/css/ and make sure you import 'utils.css' in your stories.js files:

/* Import Tailwind as Global Utils */

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

Write your Svelte component in storybook\components and yes you can use your regular .svelte file. The only thing is that you cant use templates in a story yet, not supported, but yes you can compose other components together. For the starter pack lets just create a clickable button.

<script>
    import { createEventDispatcher } from 'svelte';
    export let text = '';
    const dispatch = createEventDispatcher();
    function onClick(event) {
      dispatch('click', event);
    }
</script>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        on:click={onClick}>
  {text}
</button>

Write your stories in storybook/stories and you can name any number of story file with <anything>.stories.js, for the starter package we can create stories of Button with the readme notes at <anything>.stories.md. Note: reference the css here to make sure that tailwind is called by postcss:

import '../../css/utils.css';

import { storiesOf } from '@storybook/svelte';
import ButtonSimple from '../../components/buttons/button-simple.svelte';
import markdownNotes from './buttons.stories.md';

storiesOf('Buttons | Buttons', module)
    //Simple Button
    .add(
        'Simple',
        () => ({
            Component: ButtonSimple,
            props: { text: 'Button' },
            on: {
                click: action('I am logging in the actions tab too'),
            },
        }),
        { notes: { markdown: markdownNotes } },
    )

Write your own Documentation for the Component which will <anything>.stories.md :

# Buttons

_Examples of building buttons with Tailwind CSS._

---

Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using
existing utilities.

Here are a few examples to help you get an idea of how to build components like this using Tailwind.

Run your storyboard yarn stories and you'll see this:

You can add more addons and play around with them.

That's a wrap!