Add Gatsby cli support #3740

Keraito · 2018-06-09T19:12:35Z

Issue: Fixes #3716

Storybook and Gatsby weren't really compatible. I got storybook working for Gatsby, but then Gatsby's development server wouldn't run anymore.

What I did

After spending some time messing around in the webpack configuration of both projects, I came across gatsbyjs/gatsby#4300. Apparently, Storybook and Gatsby use different versions of Webpack, what does not really go well together and which has been reported multiple times at Gatsby's side gatsbyjs/gatsby#4283 (comment). A detailed description of the underlying issue and work-around is in babel/babel-loader#505 (comment), which is adding specifically version 7.1.1 of babel-loader to the devDependencies.

So I added a generator that adds this particular version of babel-loader, and the detector is based on the gatsby dependency. Gatsby are working on their compatibility with webpack 3, so after that we can remove this work around.

Hypnosphi · 2018-06-10T19:09:32Z

lib/cli/generators/GATSBY/index.js

+
+  // The specific version (7.1.1) of babel-loader solves a problem caused by Gatsby and Storybook using different versions of Webpack.
+  // Details on the error can be and the solution was found at: https://github.com/babel/babel-loader/issues/505#issuecomment-324268931.
+  packageJson.devDependencies['babel-loader'] = '7.1.1';


This can overwrite the version that user had before running getstorybook. Let's at least output a warning in that case

codecov · 2018-06-11T14:40:07Z

Codecov Report

Merging #3740 into master will increase coverage by 0.36%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #3740      +/-   ##
==========================================
+ Coverage   40.59%   40.95%   +0.36%     
==========================================
  Files         483      482       -1     
  Lines        5747     5696      -51     
  Branches      770      747      -23     
==========================================
  Hits         2333     2333              
+ Misses       3042     3014      -28     
+ Partials      372      349      -23

Impacted Files	Coverage Δ
lib/cli/bin/generate.js	`0% <0%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7b2b4e0...20da4b5. Read the comment docs.

Keraito · 2018-06-11T14:48:12Z

Added a warning text after installing storybook. Is it descriptive enough as is?

Also, in the original issue a fix was proposed that is more on the Gatsby side of things. but doesn't require overwriting of dependencies: #3716 (comment). Do we want to do something with that?

ndelangen · 2018-06-15T10:22:28Z

What's blocking this from moving forwards?

Hypnosphi · 2018-06-16T12:17:02Z

How will it work after #3746 ?

wuweiweiwu

This is dope!

Keraito · 2018-06-22T11:13:45Z

How will it work after #3746 ?

I'm not quite sure either, I will have to see after that PR is done. When do you expect that to be done or at a stage that I can test this PR against it, @Hypnosphi?

Hypnosphi · 2018-06-22T21:21:17Z

No estimation, sorry. I'll have a quite poor internet connection in the upcoming week

Keraito · 2018-06-22T23:59:06Z

No problem, just wanted to see if there was an ETA. I will keep an eye out for the other PR and when that's done test this PR again!

Hypnosphi · 2018-07-04T20:15:18Z

#3746 isn't ready yet, but in contains the relevant changes in lib/cli

Note that it uses babel-loader@8.0.0-beta.4 (see also #3740 (comment))

Hypnosphi

To avoid preliminary merging

Keraito · 2018-07-04T22:54:01Z

Will try to look into it when I can

Kikobeats · 2018-07-11T19:58:28Z

Gatsby community needs this a lot

Hypnosphi · 2018-09-08T15:19:53Z

lib/cli/bin/generate.js

+        .then(() => {
+          logger.log(
+            chalk.yellow(
+              'NOTE: Be careful that the specific version 7.1.1 of babel-loader was installed and has overwritten any previously present version, as this is currently required for Storybook and Gatsby to work together.'


Ideally, we should output this only if there was some other version installed

Hypnosphi · 2018-09-08T15:23:40Z

lib/cli/generators/GATSBY/index.js

+  if (!packageJson.dependencies['babel-core'] && !packageJson.devDependencies['babel-core']) {
+    packageJson.devDependencies['babel-core'] = babelCoreVersion;
+  }
+  if (!packageJson.dependencies['babel-runtime'] && !packageJson.devDependencies['babel-runtime']) {


Not needed anymore

Hypnosphi · 2018-09-08T15:26:04Z

lib/cli/generators/GATSBY/index.js

+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addons',
+    'babel-core',


we should either install babel-core@bridge + @babel/core here (see installBabel helper), or add a babel config, because our default config is now incompatible with Babel 6

shilman · 2018-09-20T22:08:02Z

FYI saw this project on Twitter that might be relevant:

https://github.com/Mathspy/gatsby-storybook-jest-starter

Keraito · 2018-09-20T23:09:06Z

That looks promising, @shilman. Will look into it when i can this week

diegolamanno · 2018-09-25T18:57:10Z

@Keraito Is this for Gatsby V2? I am starting to have problems with Storybook. They all starting to happen after updating.

Hypnosphi · 2018-09-30T12:59:05Z

Here are the changes I needed to make Storybook work with Gatsby 2:

https://github.com/storybooks/storybook/pull/4238/files#diff-2e7628bfd4b9096136534adeab54a1b1
https://github.com/storybooks/storybook/pull/4238/files#diff-867b9d35bb1242cf14dafddac05d1de7
https://github.com/storybooks/storybook/pull/4238/files#diff-d34809464730fe7381f1acde5e58c8e1 (NODE_ENV=test in storybook scripts)

Keraito · 2018-10-04T23:14:26Z

I actually made some changes locally but didnt push to remote according to the configuration in https://github.com/Mathspy/gatsby-storybook-jest-starter, which worked but required some specific versions of packages. can't remind of the top of my head but were related to:

    "@babel/core": "^7.0.0-rc.2",
    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.2",
    "@babel/preset-env": "^7.0.0-rc.2",
    "@babel/preset-react": "^7.0.0-rc.2",
    "@babel/runtime": "^7.0.0-rc.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-runtime": "^6.26.0",

But if @Hypnosphi made it work for Gatsby 2 with the described changed that might be better.

I'm atm kind of busy with some university related stuff, so I hope I can find some time this weekend to look into it further and then report back 🤞

shilman · 2018-10-05T22:47:30Z

@Keraito @Hypnosphi I haven't been keeping up on this PR (sorry), but I just wanted to let you know that I've been experimenting with compatibility for SB4:

#4281 (comment)

It seems like the current version of SB4 works fine with Gatsby 2 and that Gatsby 1 is incompatible. @Hypnosphi if you got it working with Gatsby 1, maybe you can comment here or on that issue.

Hypnosphi · 2018-10-06T12:49:14Z

if @Hypnosphi made it work for Gatsby 2

Unfortunately not: gatsbyjs/gatsby#8652

ndelangen · 2018-10-11T09:24:30Z

@shilman Is this PR still necessary?

We discussed this yesterday how you had a document for this?

Storybook 4 should be 100% compatible with Gatsby 2

pksunkara · 2018-10-13T23:08:38Z

I would like to finalize this before moving onto improvements to docs structure and netlify.

storybook-safe-bot · 2018-10-15T09:49:33Z

	Fails
🚫	PR is marked with "do not merge" label.

Generated by 🚫 dangerJS

shilman · 2018-10-15T16:00:13Z

@ndelangen The comment in question is here: #4281 (comment)

I propose that we don't worry about Gatsby 1 support and that Gatsby 2 basically works. I might be missing something though!

Keraito added feature request compatibility with other tools cli labels Jun 9, 2018

Keraito requested review from Hypnosphi, ndelangen, shilman and stijnkoopal as code owners June 9, 2018 19:12

Hypnosphi reviewed Jun 10, 2018

View reviewed changes

ndelangen approved these changes Jun 15, 2018

View reviewed changes

wuweiweiwu approved these changes Jun 18, 2018

View reviewed changes

Keraito added the ci: do not merge label Jun 22, 2018

Hypnosphi requested changes Jul 4, 2018

View reviewed changes

Keraito added 5 commits September 2, 2018 00:17

Add detection of Gatsby project

5240d71

Create Gatsby generator

09fd1f2

Add Gatsby fixture and snapshot

40ecfa7

Add warning for current gatsby cli integration fix

926b753

Make the warning slightly more descriptive

17474e1

Keraito force-pushed the gatsby-support branch from 09db449 to 17474e1 Compare September 1, 2018 22:18

Add statements lost in merge

20da4b5

Hypnosphi reviewed Sep 8, 2018

View reviewed changes

shilman mentioned this pull request Oct 4, 2018

Storybook Compatibility / Migration #4281

Closed

Hypnosphi changed the base branch from master to next November 5, 2018 17:04

ndelangen closed this Dec 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Gatsby cli support #3740

Add Gatsby cli support #3740

Keraito commented Jun 9, 2018 •

edited

Hypnosphi Jun 10, 2018

This comment was marked as outdated.

codecov bot commented Jun 11, 2018 •

edited

Keraito commented Jun 11, 2018

ndelangen commented Jun 15, 2018

Hypnosphi commented Jun 16, 2018

wuweiweiwu left a comment

Keraito commented Jun 22, 2018

Hypnosphi commented Jun 22, 2018 •

edited

Keraito commented Jun 22, 2018

Hypnosphi commented Jul 4, 2018 •

edited

Hypnosphi left a comment

Keraito commented Jul 4, 2018

Kikobeats commented Jul 11, 2018

Hypnosphi Sep 8, 2018

Hypnosphi Sep 8, 2018

Hypnosphi Sep 8, 2018

shilman commented Sep 20, 2018

Keraito commented Sep 20, 2018

diegolamanno commented Sep 25, 2018

Hypnosphi commented Sep 30, 2018

Keraito commented Oct 4, 2018

shilman commented Oct 5, 2018

Hypnosphi commented Oct 6, 2018

ndelangen commented Oct 11, 2018

pksunkara commented Oct 13, 2018

storybook-safe-bot commented Oct 15, 2018

shilman commented Oct 15, 2018

Add Gatsby cli support #3740

Add Gatsby cli support #3740

Conversation

Keraito commented Jun 9, 2018 • edited

What I did

Hypnosphi Jun 10, 2018

Choose a reason for hiding this comment

This comment was marked as outdated.

codecov bot commented Jun 11, 2018 • edited

Codecov Report

Keraito commented Jun 11, 2018

ndelangen commented Jun 15, 2018

Hypnosphi commented Jun 16, 2018

wuweiweiwu left a comment

Choose a reason for hiding this comment

Keraito commented Jun 22, 2018

Hypnosphi commented Jun 22, 2018 • edited

Keraito commented Jun 22, 2018

Hypnosphi commented Jul 4, 2018 • edited

Hypnosphi left a comment

Choose a reason for hiding this comment

Keraito commented Jul 4, 2018

Kikobeats commented Jul 11, 2018

Hypnosphi Sep 8, 2018

Choose a reason for hiding this comment

Hypnosphi Sep 8, 2018

Choose a reason for hiding this comment

Hypnosphi Sep 8, 2018

Choose a reason for hiding this comment

shilman commented Sep 20, 2018

Keraito commented Sep 20, 2018

diegolamanno commented Sep 25, 2018

Hypnosphi commented Sep 30, 2018

Keraito commented Oct 4, 2018

shilman commented Oct 5, 2018

Hypnosphi commented Oct 6, 2018

ndelangen commented Oct 11, 2018

pksunkara commented Oct 13, 2018

storybook-safe-bot commented Oct 15, 2018

shilman commented Oct 15, 2018

Keraito commented Jun 9, 2018 •

edited

codecov bot commented Jun 11, 2018 •

edited

Hypnosphi commented Jun 22, 2018 •

edited

Hypnosphi commented Jul 4, 2018 •

edited