Storybook: Perfect Storybook Config

[Benwick91]

Describe the bug
I am using and loving Storybook. But I get a little bit confused with all the config files. (config.js, main.js, addons.js, webpack.config.js, previed-head.html, manager-head.html, manager.js, preview.js, presets.js ).I think I use not the right and simplest config. Can you help me to find the best way?

I got some MXD errors and could solve them by deleting a doubled config out of my webpack and don't use "addon-docs/register" and "addons-docs" instead. Am I using the MDX config right? Or should I use the MDX loader in my webpack?

Expected behavior
I don't want to have duplicate config and want to understand the right way for me. Do I need all the files?

Code snippets
addons.js

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

config.js

import React from 'react';
import { GlobalStyle } from '../src/shared/global';
import { addDecorator, addParameters } from '@storybook/react';
import { ThemeProvider } from 'styled-components';

addDecorator(story => (
  <>
    <ThemeProvider theme={{ theme: 'default' }}>
      <GlobalStyle />
      {story()}
    </ThemeProvider>
  </>
));

main.js

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.js',
    '../src/**/*.stories.ts',
    '../src/**/*.stories.tsx',
  ],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register',
    '@storybook/addon-storysource/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-docs',
    '@storybook/addon-a11y/register',
    '@storybook/addon-notes/register',
    '@storybook/addon-viewport/register',
  ],
};

preview-head.html

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = async ({ config, mode }) => 

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [path.join(__dirname, '../src')],
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: './.storybook/tsconfig.json',
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });

  config.resolve.extensions.push('.ts', '.tsx');

  // Fix static build
  config.plugins.push(
    new webpack.DefinePlugin({
      SC_DISABLE_SPEEDY: true,
    })
  );

  // Return the altered config
  return config;
};

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-a11y: ^5.3.17 => 5.3.17 
    @storybook/addon-actions: ^5.3.17 => 5.3.17 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-docs: ^5.3.17 => 5.3.17 
    @storybook/addon-info: ^5.3.17 => 5.3.17 
    @storybook/addon-knobs: ^5.3.17 => 5.3.17 
    @storybook/addon-links: ^5.3.17 => 5.3.17 
    @storybook/addon-notes: ^5.3.17 => 5.3.17 
    @storybook/addon-storyshots: ^5.3.17 => 5.3.17 
    @storybook/addon-storysource: ^5.3.17 => 5.3.17 
    @storybook/addon-viewport: ^5.3.17 => 5.3.17 
    @storybook/addons: ^5.3.17 => 5.3.17 
    @storybook/preset-create-react-app: ^2.0.0 => 2.1.0 
    @storybook/react: ^5.3.17 => 5.3.17 

Additional context
I use:
Storybook
Styled-components
React (with create-react-app)
Typescript
EsLint
Stylelint
Prettier
Yarn

Thank you for your time and help!

[shilman]

Sorry it's confusing! We're in transition, so there are a lot of outdated blog posts/codebases out there.

Please take a look at this doc if you haven't seen it yet:

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/overview/index.md

Then:

• remove addons.js, it's redundant with main.js's addons field
• rename config.js to preview.js which is the new naming convention
• move the webpack config into main.js, which is our recommendation

Also, we have a migration guide that says the same thing in more detail: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to-mainjs-configuration

cc @ndelangen

[Benwick91]

@shilman Thank you very much. Now I understand how it works. That helps and the main and preview file working fine. The only thing which I don't getting work: How should I use my webpack config in the main.js? Thank you!

[shilman]

@Benwick91 see e.g. https://github.com/storybookjs/storybook/blob/master/examples/official-storybook/main.js#L26

[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 30 days. Thanks!

[felixroos]

This solved my problem, thank you. It would have helped me even more if the configuration docs gave a little hint about the deprecated config.js, as third party sites are still referencing the old config.js. It is confusing to not find anything about this on the official docs, needing to browse github issues for the clarification. Amazing project though, thank you!