Can I include static assets with the DSM Storybook integration?
  • 10 Jan 2023
  • 1 Minute to read
  • Dark
    Light

Can I include static assets with the DSM Storybook integration?

  • Dark
    Light

Article Summary

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

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:

static
- /fonts
-- opensans.ttf
- fonts.css

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.


Was this article helpful?