Skip to content

Commit

Permalink
Build-storybook: Document static directory workaround
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Jul 1, 2020
1 parent 8a623d7 commit e70ce1f
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 15 deletions.
35 changes: 20 additions & 15 deletions docs/src/pages/configurations/serving-static-files/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@ const image = {
alt: 'my image',
};

export const withAnImage = () => (
<img src={image.src} alt={image.alt} />
);
export const withAnImage = () => <img src={image.src} alt={image.alt} />;
```

This is enabled with our [default config](/configurations/default-config). But, if you are using a [custom Webpack config](/configurations/custom-webpack-config), you need to add the [file-loader](https://github.com/webpack/file-loader) into your custom Webpack config.
Expand Down Expand Up @@ -55,20 +53,27 @@ export default {
};

// assume image.png is located in the "public" directory.
export const withAnImage = () => (
<img src="/image.png" alt="my image" />
);
export const WithAnImage = () => <img src="/image.png" alt="my image" />;
```

You can also pass a list of directories separated by commas without spaces instead of a single directory.

```json
{
"scripts": {
"start-storybook": "start-storybook -s ./public,./static -p 9001"
}
}
```

A second common setup is where the assets are hosted in a directory, e.g. `/public` and referenced in components like `<img src="/public/image.png" />`. Storybook's static directory behavior doesn't support this well. The workaround is to create a [soft link](https://en.wikipedia.org/wiki/Symbolic_link) in the static directory to itself.

```sh
cd public
ln -s . public
```

> You can also pass a list of directories separated by commas without spaces instead of a single directory.
>
> ```json
> {
> "scripts": {
> "start-storybook": "start-storybook -s ./public,./static -p 9001"
> }
> }
> ```
We'll provide better built-in [support for this use case](https://github.com/storybookjs/storybook/issues/714) in a future version of Storybook.

## 3. Via a CDN

Expand Down
1 change: 1 addition & 0 deletions examples/cra-ts-kitchen-sink/public/public

0 comments on commit e70ce1f

Please sign in to comment.