loading...
Cover image for Setting up Storybook for Preact

Setting up Storybook for Preact

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com on ・3 min read

Update 2019/06/30: Storybook now has an option via the CLI to install for Preact. For more info see Preact for Storybook.TLDR npx -p @storybook/cli sb init --type preact.

In my last Storybook post, Getting Started with Storybook for React, I showed you how to install Storybook for React and gave a quick breakdown of what all the pieces were. I suggest giving that a quick read before continuing here.

In this post, I’ll show you how to get React Storybook up and running with Preact. The assumption is that the project you want to add Storybook to already has Preact installed as a dependency.

  1. A temporary step is to first install React, so run npm install react
  2. If you have npx installed, run npx @storybook/cli (most people should have this if you’re on a newer version of node). If not run npm install @storybook/cli -g.
  3. Next from the command line, run getstorybook
  4. This will install all the dependencies you need to run Storybook.
  5. Now let’s uninstall react from our dependencies as we want to use preact!
  6. Next we need to install preact-compat so that Preact will play nicely with Storybook. If you need preact-compat as a dependency for other react libraries, install it to dependencies, npm install preact-compat. Otherwise install it as a dev depency, i.e. npm install preact-compat -D
  7. Almost there!
  8. The last thing we need to do is tell webpack (what Storybook uses under the hood), to use preact-compat. To do this, we need to create a custom webpack configuration file for Storybook. Lucky for us, Storybook supports this out of the box. In the root folder where your package.json file is, there will be a new folder called .storybook. In there it contains files related to Storybook configuration. Create a new file in there called webpack.config.js and paste the following contents and save the file.
module.exports = {
  resolve: {
    extensions: [".js", "jsx"],
    alias: {
      react: "preact-compat",
      "react-dom": "preact-compat"
    }
  }
};

Note that this is a super bare bones webpack configuration. You can add anything else here you may need just like a regular webpack configuration file.

  1. Storybook will create some demo stories for you found in the root folder of your app at ./stories/index.stories.js
  2. Open this file and remove the React reference and replace it with import { h } from "preact";
  3. All that’s left to do is run npm run storybook and navigate to Storybook in a browser.

Screenshot of Storybook in action

Extras

  • If you want to see an example of the final result, have a look at my first commit to the dev.to repo I made in March of this year.

  • I haven’t had time yet, but I was discussing with the Storybook maintainers about potentially having a config for Preact out of the box.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

So we're already kinda compatible with Preact via the method you just described.

I wonder how many preact users are there that would not be comfortable with the needed changes, do you recon it's worth the effort? (including maintenance).

One thing one of our maintainers Igor Davydkin came up with recently was the concept of 'presets' and examples you can clone to get started.

I think this would help in your use-case, as at the very least the process of adopting storybook for Preact is in that case very well documented, because there's a runnable example available.

We could add a Preact version to our CLI too. sounds like a very good first-pr, wanna help?



Maybe I’ll get to it at some point, but if you’re interested, by all means go for it. 🙃

Discussion

pic
Editor guide
Collapse
ridermansb profile image
Riderman de Sousa Barbosa

:( not work for me..

Module build failed: SyntaxError: Unexpected token (7:61)

  5 | import Header from './Header';
  6 |
> 7 | storiesOf('<Header> component', module).add('default', () => <Header />);

I used preact/cli.. don't know if this make difference

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Could be... It sounds like your error though is that the file can't compile jsx, i.e. <Header />

Collapse
maxart2501 profile image
Massimo Artizzu

That's unfortunate that we have to do this extra job for Preact, but on the other hand things could change soon.
Yes, presets seem an adequate solution, of course a CLI version would be the best.

(Of topic, you might want to change the "font" of your name and bio. While Unicode abuse seems fun, some screen readers utter those words letter by letter.)

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

It's actually no longer the case. They now have an option via the CLI for Preact. For more info see Preact for Storybook.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

@_developit pointed out that this setup uses webpack 3.

I'll add a section some time later this week about webpack 4.