Can I include static assets with the DSM Storybook integration?

When creating live components with the DSM Storybook integration, it's possible to include static assets such as fonts and images.

To bundle local files with your Storybook bundle, you’ll need to create a static directory to store them in. For the example used in this article, the directory is named static and placed in the root of the project.

Continuing with this example, if you want to add a custom font, you could use the following file structure:

The next step is to tell Storybook to include this directory. This is done via the -s flag in the scripts section of the package.json file, as shown below.

"scripts": {
 "storybook": "start-storybook -p 9009 -s static",
 "build-storybook": "build-storybook -s static",
 "dsm-storybook:publish": "dsm-storybook publish -s static",
 "dsm-storybook:preview": "dsm-storybook preview -s static"
}

When referencing the font file locations, you should do so with a relative path where the static directory is the root folder. For example, when specifying the font file locations in fonts.css, use:

src: url("/fonts/opensans.ttf")

Similarly, to load fonts.css via the preview-head.html file in the .storybook directory, include it as:

<link href="/fonts.css" type="text/css" rel="stylesheet">

For more information on serving static files in Storybook, check out Storybook’s documentation.