Create a Svelte Component Library Using Storybook and Deploy It with Vercel
Create a Svelte Component Library using Storybook and deploy it with Vercel.
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 Vercel.
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 Vercel with no additional configuration.
Step 2: Deploying with Vercel
To deploy your Storybook component library with a Vercel for Git, make sure it has been pushed to a Git repository.
Import the project into Vercel using your Git of choice:
After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.
Once deployed, you will get a URL to see your component library live, such as the following: https://storybook.now-examples.now.sh