Vite Storybook UI
A step by step guide on how to run a Storybook project using Vite and React.
Create vite project
vite.config.js
main.ts
package.json
Run build to check if it works
App.tsx
tsconfig.json
in App.tsx replace to :
App.tsx
This next 2 parts are optional because it already worked importing the button without it .
vite.config.ts
Publish to npm
Test the npm library
install taliwind:
tailwind.config
In vite.config.js add this: Instead of using postcss.config.js
vite.config.js
in /lib create a default tailwind.css file
tailwind.css
main.ts
add storybook using vite builder:
storybook/main.ts
Create a basic Button story in /lib folder.
Exporting styles and types, in package.json:
package.json
In a new App test the library (also add the styles manually like below):
Install types: https://www.youtube.com/watch?v=T3NR6dpMZZY
vite.config.ts
In tsconfig add the lib folder (can do this earlier too):
tsconfig.json
Add tests:
package.json
vite.config.ts
in tsconfig compilerOptions make types global:
tsconfig.json
Install react-testng-library:
Create a lib/test/setup.ts
lib/test/segtup.ts
next step .... publish storybook to vercel and add figma design
the end.