Discussion on: We're the core maintainers of Storybook, Ask Us Anything!

[Nick Taylor]

That could be an issue related to how big the project is, and that is probably more webpack related.

We have large TypeScript/React projects and ended up using Happy Pack and fork-ts-checker-webpack-plugin to speed up things.

I was able to bring an initial build time down from 2 minutes to 30 seconds with subsequent super fast HMR thanks to these great projects.

So thanks to custom webpack configs in Storybook, we were able to apply these plugins to Storybook as well.

[Norbert de Langen]

Wow, that looks cool! Could we use that by default do you think?

[Nick Taylor]

You probably could. It's pretty minimal webpack changes. You include a plugin/loader and you're good to go. Here's the current TypeScript/React project I'm working on's webpack config for Storybook

/**
 * This extends the default webpack configuration used in storybook.
 */
const { resolve } = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HappyPack = require('happypack');

module.exports = {
  devtool: 'cheap-module-source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      types: resolve(__dirname, '../types'),
      helpers: resolve(__dirname, '../src', 'helpers'),
      services: resolve(__dirname, '../src', 'services'),
      reducers: resolve(__dirname, '../src', 'reducers'),
      actions: resolve(__dirname, '../src', 'actions'),
      components: resolve(__dirname, '../src', 'components'),
      routes: resolve(__dirname, '../src', 'routes'),
      utilities: resolve(__dirname, '../src', 'utilities'),
      assets: resolve(__dirname, '../src', 'assets'),
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'happypack/loader?id=ts',
      },
    ],
  },
  plugins: [
    new HappyPack({
      id: 'ts',
      threads: 2,
      loaders: [
        {
          path: 'ts-loader',
          query: { happyPackMode: true },
        },
      ],
    }),
    // Handles type  checking on another thread.
    new ForkTsCheckerWebpackPlugin({
      async: false,
      tslint: true,
      checkSyntacticErrors: true,
    }),
  ],
};