Skip to content

Commit

Permalink
Merge pull request #25291 from storybookjs/docs_remove_static_assets_…
Browse files Browse the repository at this point in the history
…flag

Docs: Remove static dir flag from documentation
  • Loading branch information
ndelangen authored Dec 21, 2023
2 parents 1fbac12 + 9b344fd commit 3f09b13
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 13 deletions.
4 changes: 1 addition & 3 deletions docs/api/cli-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ Options include:
| `-V`, `--version` | Output the version number <br/>`storybook dev -V` |
| `-p`, `--port [number]` | Port to run Storybook <br/>`storybook dev -p 9009` |
| `-h`, `--host [string]` | Host to run Storybook <br/>`storybook dev -h my-host.com` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list<br/>`storybook dev -s public` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`storybook dev -c .storybook` |
| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br/>`storybook dev --https` |
| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br/>`storybook dev --ssl-ca my-certificate` |
Expand All @@ -47,7 +46,7 @@ Options include:

<Callout variant="warning" id="static-dir-deprecation">

Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
With the release of Storybook 8, the `-s` CLI flag was removed. We recommend using the [static directory](../configure/images-and-assets.md#serving-static-files-via-storybook) instead if you need to serve static files.

</Callout>

Expand All @@ -65,7 +64,6 @@ Options include:
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br/>`storybook build --help` |
| `-V`, `--version` | Output the version number<br/>`storybook build -V` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).<br/> Directory where to load static files from, comma-separated list<br/>`storybook build -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`storybook build -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn` |
Expand Down
8 changes: 1 addition & 7 deletions docs/configure/images-and-assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,6 @@ Or even use a configuration object to define the directories:

<!-- prettier-ignore-end -->

### **[⚠️ Deprecated]** Serving static files via Storybook CLI

Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is recommended to use [Storybook static directory configuration option](#serving-static-files-via-storybook-configuration) instead.

### Reference assets from a CDN

Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.
Expand Down Expand Up @@ -143,9 +139,7 @@ Suppose you are serving assets in a [static directory](#serving-static-files-via

### Referencing Fonts in Stories

After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font in your stories.

Inside the `.storybook/` configuration folder, create `preview-head.html`, then use `<link />` to reference your font.
After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](./story-rendering.md) file inside the configuration directory (i.e., `.storybook`) and add a `<link />` tag to reference your font.

<!-- prettier-ignore-start -->

Expand Down
4 changes: 1 addition & 3 deletions docs/get-started/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,4 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in

## Load assets and resources

If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g., `/fonts/XYZ.woff`), use the `-s path/to/folder` flag to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`.

We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories.
We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/images-and-assets.md) to learn how to hosting static files with Storybook.

0 comments on commit 3f09b13

Please sign in to comment.