search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.56k stars 9.3k forks source link

[Documentation]: Add documentation for manual storybook setup without `npx storybook init` #28218

Open anguspiv opened 4 months ago

anguspiv commented 4 months ago

Describe the problem

Currently the npx storybook init is broken as reported by the issue #26553 preventing me from adding storybook to my project.

The documentation for React+Vite only provides manual migration. It only provides the init cli command to add storybook to a project.

Additional context

The issue has been open for 2+ months, so I was assuming there must be a way to setup a new project manually but I could find no documentation out there at all, especially since I wanted to use the latest.

Maybe it exists but I just couldn't locate it clearly?

The project that I was hoping to add it to: https://github.com/anguspiv/todos-app

ndelangen commented 4 months ago

I was able to add storybook to your project, but storybook can't start up because of some compatibility issue or misconfiguration issue with @remix-run/dev inside vite.config.ts.

When I commented out that plugin, storybook started up fine: Screenshot 2024-06-12 at 15 55 21

Screenshot 2024-06-12 at 15 55 40

anguspiv commented 4 months ago

@ndelangen Thank you for taking a look! I tried again and still had the issue on Node v20. I rolled Node back to v18, and was able to successfully run the storybook init command. Though, I still believe having manual instructions for setting up a project would be beneficial.