Skip to content

Instantly share code, notes, and snippets.

@shilman
Last active June 11, 2021 18:25
Show Gist options
  • Save shilman/560fb22a5b46c92bd198a6de4bf14ec0 to your computer and use it in GitHub Desktop.
Save shilman/560fb22a5b46c92bd198a6de4bf14ec0 to your computer and use it in GitHub Desktop.

Experimental Vite Builder

Storybook recently released pluggable builder support in 6.2, which promised to unlock support for webpack alternatives.

Now we have our first community builder in experimental release: storybook-builder-vite. Kudos to Eirik Sletteberg and Sasan Farrokh. Vite is one of the most exciting next-gen bundlers: the official builder of modern Vue and Svelte apps, with great DX for React and Lit as well.

Testing React

npm init @vitejs/app vite-react-app --template react
cd vite-react-app && npx sb@next init --builder storybook-builder-vite && npm run storybook

✅ SUCCESS

Testing React w/ TS

npm init @vitejs/app vite-react-ts-app --template react-ts
cd vite-react-ts-app && npx sb@next init --builder storybook-builder-vite && npm run storybook

✅ SUCCESS

Testing Vue

npm init @vitejs/app vite-vue-app --template vue
cd vite-vue-app && npx sb@next init --builder storybook-builder-vite && npm run storybook

✅ SUCCESS

Testing Web Components

npm init @vitejs/app vite-lit-app --template lit-element
cd vite-lit-app && npx sb@next init --builder storybook-builder-vite && npm run storybook

✅ SUCCESS

Testing Svelte

npm init @vitejs/app vite-svelte-app --template svelte
cd vite-svelte-app && npx sb@next init --builder storybook-builder-vite && npm run storybook

✅ SUCCESS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment