Permalink
Switch branches/tags
3407-repro 3972-options-knob-on-next 4848-new-example-format add-navbar add-polymer3-support add-react-error-overlay add-typings addon-api-concept addon-knob-vue-decoratorless addon-readme addon-resources core/remove-basic-config dd/babel-plugin-react-docgen-2 dependabot/npm_and_yarn/docs/gatsby-plugin-sharp-2.0.15 dependabot/npm_and_yarn/react-native-modal-datetime-picker-6.0.0 docs-v2-babel docs-v2-highlights docs-v2-monaco docs-v2 docs-v2.1 docs/add-versions-json docusaurus feature/add-navbar-refactor feature/add-navbar feature/custom-react-scripts fix/husky-deprecation fix/react-scripts-latest-fixture issue-3972-options-knob knobs-objects knobs/v2 master ndelange/hoisting-rn ndelangen/RN-fixattempt1 ndelangen/RN-fixattempt2 ndelangen/RN-fixattempt3 ndelangen/RN-fixattempt4 ndelangen/RN-fixattempt5 ndelangen/config-refactor ndelangen/docs-in-official ndelangen/hoisting-rn-attempt1 ndelangen/new-layoutsystem ndelangen/nicer-official-demo ndelangen/reactnext ndelangen/replace-html-webpack-plugin-v2 ndelangen/replace-html-webpack-plugin ndelangen/revert-tgz-file-dependencies ndelangen/temp2 new-docs next ng-dynamic-template oblador/fix-metro-flags-rn-57 on-device-addons on-device-ui-all-prs patch-1 patch-2 poc/addon-editor poc/liveedit-addon poc/liveedit-in-storysource-old poc/liveedit-in-storysource pr/JalilArfaoui/3909 pr/hipstersmoothie/4704 pr/kkemple/4482 pr/maacky/4856 presets/default-webpack react-native-on-device react-native/use-core-for-server redux-ui refactoring/remove-mantra-ui-overhaul-routing refactoring/remove-mantra-ui-overhaul refactoring/remove-mantra release/3.3 release/3.4 release/4.0 release/4.1-merged release/4.1 repro-instruction-update rn-tab-open shilman/angular-cli-example shilman/remove-withevents shilman/3.2.12-release snyk-fix-1n1s5x snyk-fix-iu4xwt snyk-fix-m3aahq snyk-fix-ncwvxj snyk-fix-pek1pb snyk-fix-q1x0k4 snyk-fix-rum9x7 snyk-fix-wmry50 storysource-with-deps tech/emotion10 tech/overhaul-ui-addon-notes-ts tech/overhaul-ui-store tech/overhaul-ui tech/try-github-workflos tmeasday/add-refs-to-stories tmeasday/check-react-access-3.4 tmeasday/embed-preview-context try-to-fix-master ts-migration/channels
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (65 sloc) 3.42 KB
id title
default-config
Default Config

Storybook has a default Webpack setup which suits a large range of projects. It is similar to Create React App's config when using react, and has been tweaked to closely resemble the webpack config generated by Vue CLI.

Let's learn about the default config comes with Storybook.

Table of Contents

Babel

We use Babel for JavaScript(ES6) transpiling. Here are some key features of Storybook's Babel configurations.

ES2016+ Support

We have added ES2016 support with Babel for transpiling your JS code. In addition to that, we've added a few experimental features, like object spreading and async await. Check out our source to learn more about these plugins.

.babelrc support

If your project has a .babelrc file, we'll use that instead of the default config file. So, you could use any babel plugins or presets that you have used in your project with Storybook.

Webpack

We use Webpack to serve and load JavaScript modules for the web. We've added some Webpack loaders to bring some good defaults. (This setup is very close to what you get with the Create React App.)

CSS Support

You can simply import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file.

Basically, you can import CSS like this:

// from NPM modules
import 'bootstrap/dist/css/bootstrap.css';

// from local path
import './styles.css';

Note: this is plain CSS only. If you need a preprocessor like SASS, you need to customize the webpack config.

Warning: storybooks for projects that use Angular CLI cannot import CSS by default. They must either customize the webpack config, or use the inline loader syntax:

import '!style-loader!css-loader!./styles.css';

Image and Static File Support

You can also import images and media files directly via JavaScript. This helps you to write stories with media files easily. This is how to do it:

import React from 'react';
import { storiesOf } from '@storybook/react';

import imageFile from './static/image.png';

storiesOf('<img />', module)
  .add('with a image', () => (
    <img src={imageFile} alt="covfefe" />
  ));

When you are building a storybook, we'll also export the imported image. So, this is a good approach to loading all of your static content.

Alternative: storybook also has a way to mention static directories via the -s option of the start-storybook and build-storybook commands. read more

JSON Loader

You can import .json files, as you do with Node.js. This will also allow you to use NPM projects, which imports .json files inside them.

NPM Modules

You can use any of the NPM modules installed on your project. You can simply import and use them.