Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.