Storybook main.js Generator

You already have a React project on Vite and just want to slot Storybook into it. Running the init sometimes rewrites more than you would like, or fails because your folder layout is not the standard one. In practice, what you are missing is a single file: the .storybook/main.js that points at your stories and names the framework.

The tool prints that file whole, with no fields to fill in, visible the moment the page opens. It uses module.exports to declare a stories glob under ../src covering js, jsx, ts, tsx and mdx, an addons list with essentials, interactions and links, the @storybook/react-vite framework, and docs with autodocs in tag mode. The path is relative to the .storybook folder, not to the project root.

Two edits come up often. Since the file uses module.exports, it breaks when package.json has type: module; rename it to main.cjs or switch to export default. And this is a Storybook 7 shaped config: newer releases folded much of the essentials bundle into the core, so check which addon packages you still need before installing all three. The text is generated in your browser.