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

There are two ways to deploy with ZEIT Now. We recommend using a ZEIT Now for Git Integration for ease-of-use. Alternatively, Now CLI can be used to generate a manual Preview Deployment.

Once deployed, you will get a URL to see your component library live, such as the following: https://storybook.now-examples.now.sh


To deploy your Storybook component library with a ZEIT Now for Git Integration, make sure it has been pushed to a Git repository.

Import the project into ZEIT Now using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.



Written By
Written by msweeneydevmsweeneydev