Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Configuring the Storybook DSM Integration

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

The first step to using Live Components is configuring the Storybook DSM integration.

You only need to configure the integration the first time you add Live Components.

Installing Storybook

As mentioned in the Getting Started with Live Components article, the DSM Live Components feature requires that you first create a Storybook story for the component you want to embed in DSM.

Note that if you're using Storybook v4, the Live Components feature supports version 4.0.0 and later. If you're using Storybook v5, the Live Components feature supports version 5.1.1 and later.

When your stories are working properly in your local Storybook project, you’re ready to start embedding those stories in DSM.

If you haven’t yet created stories in Storybook, but you want to see how Live Components will work in DSM, we recommend downloading our example component library from Github. It includes sample components and is pre-configured with Storybook.

Installing the DSM CLI

First, you will need to install the DSM command-line interface (CLI) in your project. In your development environment, run the following command:

npm install @invisionapp/dsm-storybook

Peer dependencies

Before configuring Storybook with DSM, there are a few peer dependencies you will need to install:

  • @storybook/addon-options
  • @storybook/addons

Adding CLI shortcuts

Optionally, you can create CLI shortcuts to more easily publish and preview live components in the future. Add the following CLI shortcuts to the scripts section of the package.json file of your Storybook component library project:

"scripts": {
  "dsm-storybook:publish": "dsm-storybook publish",
  "dsm-storybook:preview": "dsm-storybook preview"
}
If you're following along with the example Storybook component library project, you'll notice these shortcuts have already been added to the package.json file.

Adding a DSM configuration file

To obtain the code for the .dsmrc configuration file:

  1. Open your library in the DSM web view. 
  2. At the top right of the page, click the code icon (dsm-web-view-code-icon.png) and select Live components setup.
  3. Scroll to Integration details and, next to DSM configuration file, click Open.
  4. Copy the code and add it to a .dsmrc configuration file in your Storybook component library project.
    You’ll notice that in the code, there is a placeholder for an authentication token. The section “Generating an authentication token” covers how to generate a token for your .dsmrc file.
obtain-dsm-configuration-file.gif

Place the .dsmrc configuration file in the root of your Storybook component library project. The root of the project is the same folder where the package.json file lives.

If you're following along in the example Storybook component library project, you'll notice the .dsmrc file has already been added to the root of the project. Replace the default values in this file with the code you copied from your Integration details section.

Some parts of the code require unique values provided by you. The following table shows what each key represents in the DSM configuration file.

Key

Value

authToken

This authenticates the CLI during the upload of the Storybook to DSM. You will generate an authentication token in the next step.

dsmHost

This is the URL to which the Storybook will be uploaded.

For example: https://your-company-name.invisionapp.com/dsm/your-dsm-organization-name

organization

This is the name of the DSM organization.

For example: https://your-company-name.invisionapp.com/dsm/your-dsm-organization-name

outputDir

This builds the output folder path. The default value is .dsm.

storyPath

This is a glob pattern of where DSM should search for stories.

Generating an authentication token

When you copied the code for your .dsmrc file, you may have noticed a placeholder for an authentication token. The .dsmrc configuration file requires an authentication token.

To generate an authentication token:

  1. Open your library in the DSM web view.
  2. At the top right of the page, click the code icon (dsm-web-view-code-icon.png) and select Live components setup.
  3. Scroll to Integration details and, next to Manage authentication tokens, click Manage.
  4. Click Generate new token.
  5. Copy the token and click Save.
    For security purposes, this token is only displayed once, so be sure to copy it somewhere safe before clicking Save.

After you’ve generated the token, paste it into your .dsmrc file.

dsm-generate-authentication-token.gif

Adding DSM as a Storybook addon

The next step is to add DSM as a Storybook addon. To do so, you will need to add two different blocks of code into your Storybook component library project.

If you're following along in the example Storybook component library project, you'll notice these code snippets have already been added.

Changes to addons.js

Navigate to the .storybook folder of your Storybook component library project and add the following code to .storybook/addons.js:

import { registerDsm } from '@invisionapp/dsm-storybook/register';
registerDsm(process.env.STORYBOOK_DSM);

Changes to config.js

Depending on your version of Storybook, change .storybook/config.js to include one of the following DSM-specific code snippets.

In the first line of each of the following code snippets, replace @storybook/vue with your chosen framework. For example, if you're using HTML, type @storybook/html.

If you're using Storybook v4, add this code snippet:

import { configure, addDecorator } from '@storybook/vue';
import { initDsm } from '@invisionapp/dsm-storybook';

function loadStories() {
  require('../src/stories');
}

//Init Dsm
initDsm({
  addDecorator,
  callback: () => configure(loadStories, module)
});

If you're using Storybook v5, add this code snippet:

import { configure, addDecorator, addParameters } from '@storybook/vue';
import { initDsm } from '@invisionapp/dsm-storybook';

function loadStories() {
  require('../src/stories');
}

//Init Dsm
initDsm({
  addDecorator,
  addParameters,
  callback: () => configure(loadStories, module)
});

Learn something new

Getting Started Guides