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
Next, use the Storybook CLI to bootstrap the project, providing an initial setup to work from:
npx -p @storybook/cli sb init --type svelte
Now, add @storybook/svelte
, @babel/core
, and babel-loader
as development dependencies:
npm i -D @storybook/svelte @babel/core babel-loader
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" } }
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
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 the production domain updated on push to master.