Storybook: VueJS Webpack Template Compatibility

[philipithomas]

I just spent the better part of a day getting Storybook to work with our VueJS codebase, which is based on the VueJS Webpack Template.

The hardest part was getting the webpack configurations to work. Loaders seemed to keep causing issues for many different kinds of files. We use some features beyond the base template such as custom font loading, importing fontawesome, and a single global variables.scss file.

What I basically ended up doing was merging the Storybook config with the build/webpack.base.conf.js, while selectively importing some features from build/webpack.dev.conf.js.

This part of the build/webpack.dev.conf.js caused issues, and I'm not sure why:

new webpack.DefinePlugin({
      'process.env': config.dev.env
}),

So, here is the .storybook/webpack.config.js that worked for me:

// load the default config generator.
const devConfig = require('../build/webpack.base.conf.js');
const path = require('path');
var utils = require('../build/utils');
var merge = require('webpack-merge');
var webpack = require('webpack')
var config = require('../config');
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  devConfig.entry = storybookBaseConfig.entry;
  devConfig.output = storybookBaseConfig.output;

  devConfig.module.rules.push(storybookBaseConfig.module.rules[0]);

  return merge(devConfig, {
    module: {
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new FriendlyErrorsPlugin(),
    ]
  })
};

What's my goal with opening a Github issue? The Vue Webpack Template is fairly standard in the Vue community. I think that we could work to improve my hack into a "best practices"
Storybook webpack configuration for users of VueJS Webpack Template.

If this issue isn't actionable - feel free to close it, and people who want to see my solution can find it through search.

[kazupon]

I'm contributing to make storybook available for vue users community. However, My time is limited due to hard to work and Vue.js core team.

I hope your contributing. 👍

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[ndelangen]

@philipithomas We'd be happy to change the default webpack config to accommodate users of the vue webpack template. Would you be interested in helping us and make a PR?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!