add manual setup guide for react+vite without the cli#34570
Open
nitzan-treg wants to merge 1 commit into
Open
Conversation
`added a new faq section to the react-vite framework docs that walks through setting up storybook manually without the cli -- installs, config files, package.json scripts, the whole thing. also added a pointer to it from the install page troubleshooting section so users hitting cli failures can find it. created the snippet files needed to back the new code examples.` Signed-off-by: nitzan-treg <nitzan.tregerman@gmail.com>
Contributor
📝 WalkthroughWalkthroughAdded documentation snippets and FAQ section for manual Storybook setup with React and Vite. Includes installation commands, configuration file templates (main.js/ts and preview.js/ts), package.json script examples, and a troubleshooting reference. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/get-started/frameworks/react-vite.mdx (1)
74-117: Consider adding prerequisites note.The manual setup guide could benefit from a brief note mentioning that React and Vite should already be installed in the project, as this is a "React + Vite" setup guide. This would help users understand the starting point.
📝 Suggested addition after the opening paragraph
If `npm create storybook@latest` isn't working for your project, you can set up Storybook manually in a few steps. +<Callout variant="info"> + This guide assumes you already have a React project with Vite installed. If you're starting from scratch, first create a React + Vite project using `npm create vite@latest`. +</Callout> + **1. Install the required packages**🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/get-started/frameworks/react-vite.mdx` around lines 74 - 117, Add a brief "Prerequisites" note right after the opening paragraph of the "How do I set up Storybook for React and Vite without the CLI?" section stating that the project must already have React and Vite installed (and suggest Node/npm/yarn versions if desired); reference the manual setup steps and files (react-vite-manual-install.md, react-vite-manual-main.md, react-vite-manual-preview.md, storybook-package-scripts.md) so users know this guide assumes an existing React+Vite project before following the manual Storybook steps.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@docs/get-started/frameworks/react-vite.mdx`:
- Around line 74-117: Add a brief "Prerequisites" note right after the opening
paragraph of the "How do I set up Storybook for React and Vite without the CLI?"
section stating that the project must already have React and Vite installed (and
suggest Node/npm/yarn versions if desired); reference the manual setup steps and
files (react-vite-manual-install.md, react-vite-manual-main.md,
react-vite-manual-preview.md, storybook-package-scripts.md) so users know this
guide assumes an existing React+Vite project before following the manual
Storybook steps.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9547cf7f-6cea-4231-9dd0-6d86fe7bc4de
📒 Files selected for processing (6)
docs/_snippets/react-vite-manual-install.mddocs/_snippets/react-vite-manual-main.mddocs/_snippets/react-vite-manual-preview.mddocs/_snippets/storybook-package-scripts.mddocs/get-started/frameworks/react-vite.mdxdocs/get-started/install.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
hey, saw #28218 and took a look
added a new faq section to the react-vite framework docs that walks through setting up storybook manually without the cli -- installs, config files, package.json scripts, the whole thing. also added a pointer to it from the install page troubleshooting section so users hitting cli failures can find it. created the snippet files needed to back the new code examples.fixes #28218
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit