Create-react-app: Adding storybook

[arunoda]

Guys,

This project rocks. To follow this path, we at https://github.com/kadirahq/react-storybook is also working on a zero config mode.

I'm asking whether will that be possible to add storybook into this mix?

Basically, this is something I'm proposing:

• We'll ship react-storybook into dependencies
• Then when a user runs npm run storybook it'll start running stories located src/stories or somewhere like that?
• There's no need to have any other config files.

[mxstbr]

Haha one of the reasons we made https://github.com/carteb/carte-blanche is that all the configuration of storybook annoyed us, love that you're going down that path!

Anyhow, I think it's out of the scope of the project, but I'm biased so I'll let others have this discussion!

[arunoda]

@mxstbr it's depend. Yep. I agree it might be out of scope for this project.
Yeah! Both projects took two different goals.

Anyway, I think now we've a solid base(thanks to this project) to add some default config.
I'll look at what we can get from carte-blanche :)

[lacker]

I think it is out of scope to ship storybooks by default with this project, but I think it would be nice if there were a way to add storybooks to a create-react-app app, without having to eject or to configure things. What is the workflow for an app that is developing using storybooks - do you have a dev server that you run with npm start like usual, but you also have a "storybook server" that you can run with npm run storybook? I was hoping for the run command to be useful for additional tooling like this, but if this is building its own separate server then it's a bit of a different case.

[gaearon]

I'm not opposed to providing something that lets you quickly play with a single component and iterate on it in isolation. This can be run or a storybook but we need it to stay lightweight, portable and not very opinionated.

[arunoda]

@lacker I totally agree with your comments.
We use a our own server to serve the stories. We want to have a isolate environment for React components. But I think we could use carte-blanche like approach and bundle storybook as a webpack plugin.

---

I just updated React Storybook's webpack environment very similar to react-scripts.
So, this is how to add storybook support to a create-react-app based project.

We are looking to create a generator project called storybook-init which add these set of code to any React app. I think having to do this without ejecting is pretty great.

I'll update as we add more improvements to this process.

[arunoda]

I've build a simple tool to add storybook to any React app.
See: https://github.com/kadirahq/getstorybook

I think we could close this now.
Thanks all for ideas.

[mquandalle]

I just wanted to share a though I had about this issue. When asked if create-react-app will support React-native the answer rightfully was that RN already has Packager which fulfill a similar role. Now starting with RN v0.31 (released 1 hour ago, yay!) Packager merged RNPM (react-native package manager) into its core CLI tool. This is interesting because it means that the RN folks recognized that downloading RN dependencies and putting them in the node_modules directory wasn’t enough and there was a need for a proper installation step that would be aware of React-Native specifics. Just to give an example of that, if you want to install RN vector icons it’s not enough to download the NPM package, you have to modify the Android Gradle build step to include the icons (and similarly for iOS), which rnpm link can do automatically for you.

Back into the storybook/carte-blanche integration into create-react-app, it seems to me that we need an installation step that is aware of create-react-app specifics (in this case it's not the java/gradle build step, but it's webpack config, babel options, etc.). This linking logic was implemented by @arunoda in the separate getstorybook package. But if my analogy with RN Packager is correct, wouldn't it preferable to have a standard command to link a plugin, instead of package authors having to create a distinct global CLI util to install their package into an existing react-create-app application?

[gaearon]

If you have specific suggestions on what we should expose we're happy to discuss them. But please also see https://github.com/facebookincubator/create-react-app/issues/339#issuecomment-237193185. We don't want to work on extensibility yet because things are changing too fast, and it would undermine our ability to provide a great experience (because naturally people will install all sorts of plugins, some of which will be unstable or buggy, and we are back to complicated builds and broken examples).

[gaearon]

I’ll reopen—I don’t want to force Storybook integration upon anyone but I’d like to see it documented in the Usage Guide. @arunoda Would you like to make a PR?

[arunoda]

Wow. That's super awesome.
I will send a PR.

[gaearon]

Let’s iterate on #738. Closing.