Publish your Storybook components on npm

Storybook and Library setup

1. Create a new Angular Library using the steps from Angular.io

ng new my-workspace --create-application=false

cd my-workspace

ng generate library storybook-library

After these run the storybook installation simply by running:

npx sb init

This will install storybook, the required dependencies and update the scripts.

1. Once done run npm run storybook to launch it. There’s some existing boilerplate code when you run storybook for the first time to get you started with it.

Publish configuration

If you intend to publish your packages to a private or public repository you’ll need to change the configuration a little to include the registry url for the repository you’ll be using.

1. Open package.json from the projects folder of your workspace.

It’s important to add configuration to the right package.json. You now have two package.json files one in the root of your workspace and another under the projects folder.

1. Add the below configuration to enable publishing of your packages

"publishConfig": {
    "registry": "http://myprivaterepo.com/repository/private/"
}

If you’re using a public npm repository, you might need to create and account if you don’t have one. You’ll also need to login by using command npm login and then you can use npm publish from the build directory to publish your packages.

1. To build your storybook components or modules, you can run

npm run build

This will build your project and will put the final contents inside a directory similar to

dist / yourProjectName

You can now run npm publish from this directory to publish your packages.