From e70ce1fd34a33d223a7faa9a35ae9451dee5c129 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Wed, 1 Jul 2020 10:27:59 +0800
Subject: [PATCH] Build-storybook: Document static directory workaround

---
 .../serving-static-files/index.md             | 35 +++++++++++--------
 examples/cra-ts-kitchen-sink/public/public    |  1 +
 2 files changed, 21 insertions(+), 15 deletions(-)
 create mode 120000 examples/cra-ts-kitchen-sink/public/public

diff --git a/docs/src/pages/configurations/serving-static-files/index.md b/docs/src/pages/configurations/serving-static-files/index.md
index 881a5bb538f6..8231ace734f3 100644
--- a/docs/src/pages/configurations/serving-static-files/index.md
+++ b/docs/src/pages/configurations/serving-static-files/index.md
@@ -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.
@@ -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
 
diff --git a/examples/cra-ts-kitchen-sink/public/public b/examples/cra-ts-kitchen-sink/public/public
new file mode 120000
index 000000000000..945c9b46d684
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/public/public
@@ -0,0 +1 @@
+.
\ No newline at end of file