Skip to content

Instantly share code, notes, and snippets.

@shilman

shilman/vite-builder.md

Last active June 11, 2021 18:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shilman/560fb22a5b46c92bd198a6de4bf14ec0 to your computer and use it in GitHub Desktop.
Save shilman/560fb22a5b46c92bd198a6de4bf14ec0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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

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