Setting up Vue Storybook with Vite to build a Fintech UI Library
This article covers how to build UI components using the new official next-generation module bundler built by the team behind Vue — Vite and the de-facto tool for building components in an atomic way — Storybook. We’ll talk a little bit about these tools and how we can quickly setup Storybook to run on Vite.
Note
This article is for an outdated version of Storybook. Today, storybook natively supports vite out of the box. Just setup your Vue project and install Vue like you normally would and it’d work right out of the box. This problem was mainly faced versions of Storybook earlier than v7.
Introduction
Storybook is a tool for creating UI components in isolation. It allows us to build each component independently, render them, and test all the properties and states that component can be rendered in. It gives us a UI to manage the properties and stress-test the components and thus allows all members of the team (technical and non-technical alike) to test the components appropriately.
Vite is a next-generation module bundler shipped by the team behind Vue. It’s extremely fast, easy to use and provides a lot of features that tools like Webpack left to the developer out of the box. The result is a tool that is less of a pain to work with. If you’ve been in the development space long enough, you know the headache Webpack can bring if it decides it’s your turn.
The reason this article is written is that Vite is relatively new and Storybook was built (and ships on) Webpack by default. This means if you have a new Vue 3 application bootstrapped with Vite and you try to install Storybook, it’ll run on Webpack, meaning you’ll have Vue running on Vite, and Storybook running on Webpack and you’ll in turn run into a lot of problems. Below, we’ll go through a step by step process of setting up Storybook on Vite.
Install storybook-builder-vite
Firstly, setup Vue and vite like you normally would and then install a plugin called storybook-builder-vite. This plugin would let us run Storybook on Vite. We install it like we would any npm package.
npm install storybook-builder-viteInstalling this package would allow Storybook run properly on Vite, now you can use Storybook as you would normally do.
Can you see the instant reduction in the build time? On average it builds in less than a second 😱
Building your Stories
If you try to build your stories in order to deploy to a remote server, you’ll notice it doesn’t render properly and shows an error. As at the time of writing, this is what running npm run build-storybook shows when you visit the built page.
It tries to access the assets from the direct root instead of doing it relatively. I spent a great deal of time trying to resolve this issue before finding a closed issue on the storybook-builder-vite repo.
The summary is that by default, the built storybook tries to access files from the absolute root path, but it depends on you the developer to specify the root from the main.js config file in your .storybook folder. In order to fix this and have it render properly on your deployed instance, update your .storybook/main.js file like this:
What the code above does is this:
1. We can update Vite configurations by using the viteFinal function in the main.js file
2. We specify that the base path should use an empty string by setting config.base = ''
With this storybook should run fine when you deploy.
Conclusion
We learned how to setup Storybook with Vite and how to fix the potential issues faced with doing so. Storybook and Vite are amazing tools that make atomic development amazing.
If you enjoyed this article, consider clapping, sharing and following me to get notified when I write more. Also follow me on Twitter (@ericmcwinner), I’d love to see you there and share more content to you over there. Cheers!
