GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-19 05:02:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix configurations/overview header & add glob info

Browse Source 
With some rewording for optimal conciseness and flow.
This commit is contained in:
Matthias 2020-03-23 13:03:16 -04:00 committed by GitHub
parent 46030c62f9
commit 0c04872bec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/src/pages/configurations/overview/index.md
View File

@ -1,4 +1,3 @@
---
id: 'overview'
title: 'Configuration overview'
@ -8,13 +7,13 @@ For CLI options see: [here](/docs/cli-options).
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
## main configuration
## Main configuration
Storybook has a few files it uses for configuration, and they are grouped together into a directory (default: `.storybook`).
The most import file is the `main.js` file. This is where general config is declared.
Here's an minimal example of a that file:
Here's an minimal example of that file:
```js
module.exports = {
@ -25,17 +24,24 @@ module.exports = {
};
```
The addons field can refer to traditional [addons](docs/addons/introduction), but it can also include [presets](/docs/presets/introduction/) extending the config further.
`stories` is a list of [glob](https://www.npmjs.com/package/glob) patterns that tells where your stories are located, relative to the configuration file.
## manager & preview
The `addons` field can refer to traditional [addons](docs/addons/introduction), but it can also include [presets](/docs/presets/introduction/), which are able to extend the config further.
Storybook works by being split into 2 applications, which communicate with each other over a postmessage channel; called the "manager" and "preview".
### `main.js` is a Preset
The `main.js` file is actually a preset! So if you know how to configure storybook, then you know how to write a preset, and vice-versa!
So the `main.js` API is equal to [that of presets](/docs/presets/writing-presets/#presets-api).
The preview application is essentially just your stories with a framework agnostic 'router'. Making it so when the manager application tells it so, it renders the correct story.
## Manager & preview
Storybook works by being split into 2 applications ("manager" and "preview"), which communicate with each other over a postMessage channel.
The preview application is essentially just your stories with a framework-agnostic 'router'. It renders whichever story the manager application tells it to render.
The manager application renders the UI of [addons](docs/addons/introduction), the navigator and [toolbar](/docs/basics/toolbar-guide/).
There are 2 extra config files, for doing some special runtime configs for each of those 2 applications.
There are two extra config files, if you need to configure the runtime of Manager or Preview.
In `preview.js` you can add global [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters):
@ -59,23 +65,6 @@ addons.setConfig({
});
```
## entire main.js config
The `main.js` file is actually a preset! so if you know how to configure storybook, you know how to write a preset, and vice-versa!
So the API of `main.js` is equal to [that of presets](/docs/presets/writing-presets/#presets-api).
Here's an overview of the important configuration properties in `main.js`:
```js
module.exports = {
// and array of glob patterns
stories: ['../src/components/**/*.stories.js'],
// an array of addons & presets
addons: ['@storybook/addon-essentials'],
};
```
## webpack
For how to customize webpack, [view the customize webpack section](/docs/configurations/custom-webpack-config/)
For how to customize webpack, [view the customize webpack section](/docs/configurations/custom-webpack-config/)