Create a Svelte Component Library Using Storybook and Deploy It with ZEIT Now

Create a Svelte Component Library using Storybook and deploy it with ZEIT Now.

Storybook is an open source tool for developing JavaScript UI components in isolation. Svelte is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.

In this guide, you will discover how to set up a Svelte Storybook component library with Storybook CLI and how to deploy it with ZEIT Now.

Step 1: Set Up Your Storybook Project

Get started by creating and moving into a /svelte-stories directory, then initializing the project:

mkdir svelte-stories && cd svelte-stories && npm init -y

Creating and entering into the /svelte-stories directory, then initializing a project.

Next, use the Storybook CLI to bootstrap the project, providing an initial setup to work from:

npx -p @storybook/cli sb init --type svelte

Bootstrapping a Svelte Storybook project with Storybook CLI.

Now, add @storybook/svelte, @babel/core, and babel-loader as development dependencies:

npm i -D @storybook/svelte @babel/core babel-loader

Adding @storybook/svelte, @babel/core, and babel-loader to the project as a development dependencies.

With the development dependencies added, extend your package.json file by adding the scripts below:

{
  "scripts": {
    ...
    "storybook": "start-storybook",
    "build": "build-storybook -c .storybook -o public"
  }
}

Adding storybook and build scripts to the package.json file.

By adding these scripts you are able to start a development server from inside your project directory with npm storybook. You are also able to deploy the Storybook component library with ZEIT Now with no additional configuration.

Step 2: Deploying with ZEIT Now

With your project set up, you are ready to deploy your Storybook component library with ZEIT Now.

If you have not yet installed Now, you can do so by installing Now CLI.

You can now deploy your Storybook component library with a single command:

now

Deploying the app with the now command.

If you want to deploy your Storybook component library from a Git repository, you can use either Now for GitHub or Now for GitLab to have your project automatically deployed on every push, and aliased on push to master.



Written By
Written by msweeneydevmsweeneydev
on August 21st 2019