vite-builder.md

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