Storybook Setup: HTML + JS

Storybook is a UI development tool that allows you to develop components in isolation. Many UI components will likely be written in popular frameworks such as Vue, React, Angular, etc. Due to their popularity, there are many examples online of how to build stories for components written in those frameworks.

In this post, I will show how to setup Storybook for your component that is written in HTML and JavaScript. I wasn’t able to find much documentation regarding this use case, which is why I had some trouble with my very first encounter with Storybook. I hope this post prevents others from running into the same issues.

Step 1

Install Storybook into your project by running the following command:
npx -p @storybook/cli sb init — type html

Step 2

Create a .storybook directory at the root of the repository by running the following command from the root:
mkdir .storybook

Step 3

Create a config.js file under the .storybook directory and paste the following code snippet into the file:

import { configure } from '@storybook/html';
function loadStories() {
  const req = require.context('../src', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

This code snippet specifies what directory to search under (../src in this example) for stories that match the file extension .stories/.js$ .

Step 4

Create a webpack.config.js file under the .storybook directory and paste the following code snippet into the file:

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.runscript.js$/i,
    use: 'raw-loader',
  });
// Return the altered config
  return config;
};

This configuration will allow you to import a js file as a string that enables you to write JS code with IDE support.

Step 5

Install the storybook-addon-run-script addon by running the following command:
yarn add storybook-addon-run-script --dev
This addon will allow you to run a script inside your preview window by appending a script tag with your script content.

Step 6

Under the src directory, create a JS file that includes the script you would like to run as part of your component and name the file in the following format: *.runscript.js. All script tags from the html file of your component should be moved into this file.

Step 7

Under the src directory, create a story file for your component and configure the story in the following way:

import { storiesOf } from '@storybook/html';
import Component from './index.html';
import { withRunScript } from 'storybook-addon-run-script/html';
import runScript from './sample.runscript.js';
storiesOf('Sample Story', module)
  .addDecorator(withRunScript(runScript))
  .add('default', () => Component);

The file name should be in the following format: *.stories.js .

Step 8 (Optional)

If you would like certain scripts to be run on all stories, you can include them in a file named preview-head.html under the .storybook directory. You can add scripts to the file in the following way:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Repository Structure

- .storybook/
  | - config.js
  | - preview-head.html
  | - webpack.config.js
- src/
  | - index.html
  | - sample.runscript.js
  | - sample.stories.js
- package.json