Support create-react-app out from the box

[just-boris]

Create React App is a tool to set up react project with good defaults. I am using this for some little short-term project and enjoy configuration-less developer environment.

It would be nice to use react-styleguidist the same way: without any configuration, just specified that I am using well-known project setup. Let's say that we should set updateWebpackConfig to something like this:

module.exports = {
  components: './src/components/**/index.js',
  updateWebpackConfig: require('react-styleguidist/react-app-preset')
};

The name of this import can be different but the idea is that config doesn't have any options, just one simple require instead of the wall of typical setup.

So far I could make it working together with the this styleguide.config.js.

What do you think about putting this into core project to help users to setup styleguides with create-react-app easier?

[sapegin]

I like the idea! Should it be a separate package? What would be its dependencies?

[just-boris]

Yes, it can be a separate package. So far I tried to create this: https://github.com/just-boris/react-app-styleguidist

The work is not finished, but I expect that setup instructions in Readme wouldn't be changed. I tried to make that as easy as possible.

Implementation details: it uses Styleguidist node API and merges Create-react-app config into current default. Source.

[sapegin]

Looks interesting! Is it possible to use regular Styleguidist config as well? Might be useful though create-react-app has no one ;-)

[just-boris]

What do you mean as "regular config"?
Now I am using updateWebpackConfig function where I extend webpack config with extra loaders from react-scripts package

[sapegin]

I mean styleguidist.config.js.

[just-boris]

The purpose of my project as well as create-react-app itself, is keeping your project clean from any kind of config. If you want to provide some configuration options, you can always switch back to the classic usage of react-styleguidist.

However, this is a good point. I will add eject instructions how to extract config and start using styleguidist directly.

[sapegin]

I’m not sure it’s really useful if you can’t even change a title of your styleguide ;-)

[sapegin]

Eject could generate a config like that:

module.exports = {
  components: './src/components/**/index.js',
  updateWebpackConfig: require('react-app-styleguidist'),
};

[just-boris]

I’m not sure it’s really useful if you can’t even change a title of your styleguide

The title will be picked up from package.json file of the project.

Well, I could make everything working as expected. The eject process also was described there.

The next step will be publishing this into create-react-app users community to gather some feedback. As far I will publish the release of react-app-styleguidist we can close this issue.

[sapegin]

The title will be picked up from package.json file of the project.

Good idea!

And feel free to send a pull request to update the docs.

[just-boris]

Related PR into Create React App: react/create-react-app#921

[sapegin]

Cool, thanks!

[sapegin]

CRA is supported in 5.0.0, I’ll send a new PR to CRA later.