mock service worker integration in storybook-build about msw-storybook-addon HOT 19 CLOSED

@kettanaito - I'm having a similar issue using the latest versions of msw (0.42.2) and this addon (1.6.3).

I'm seeing the mocking behaviour perfectly functional when running the development Storybook server, but when serving a static build through http-server, it appears that the addon doesn't initialise at all. I can't see any errors to be able to show here either unfortunately.

The only thing I can think of that's different to the setup in the docs is that we're using the Storybook public folder instead of the regular app one, is it possible this could make a difference? The mockServiceWorker.js file is correctly set up in .storybook/public/mockServiceWorker.js.

"storybook": "start-storybook -s .storybook/public ./styles/images -p 6006",

Is there any more information I can provide for debugging purposes, or any advice on what could be incorrect in terms of configuration? Otherwise if confirmed, would it be possible to re-open this issue?

from msw-storybook-addon.

A colleague pointed out an unfortunate mistake to me, in that you can see above the build-storybook command doesn't make use of -s .storybook/public. Adding this made it work, which makes pretty obvious sense as to why the worker file wasn't in the build 🤦🏻 looks like I was only checking for the -s flag in the serve command.

In any case, thanks for your responses, and for the work on this addon!

from msw-storybook-addon.

Hey, @pedrohba1. Thanks for raising this.

We've been working on the support of static Storybook builds for some time now, and it's already shipped in MSW. There's a remaining addon update and release to be issued, hopefully, this month, and you'll be able to use MSW with static builds just as you do during the regular dev builds. Please be patient. I'll update this issue once the new version of the addon is released.

from msw-storybook-addon.

@oanaOM we are currently working on improving the Storybook add-on, which will include the exact dependency versions to ensure static build support. If updating to [email protected] didn't help, I recommend waiting for the next release of this add-on. Thanks.

from msw-storybook-addon.

@kettanaito - I'm having a similar issue using the latest versions of msw (0.42.2) and this addon (1.6.3).

I'm seeing the mocking behaviour perfectly functional when running the development Storybook server, but when serving a static build through http-server, it appears that the addon doesn't initialise at all. I can't see any errors to be able to show here either unfortunately.

The only thing I can think of that's different to the setup in the docs is that we're using the Storybook public folder instead of the regular app one, is it possible this could make a difference? The mockServiceWorker.js file is correctly set up in .storybook/public/mockServiceWorker.js.

"storybook": "start-storybook -s .storybook/public ./styles/images -p 6006",

Is there any more information I can provide for debugging purposes, or any advice on what could be incorrect in terms of configuration? Otherwise if confirmed, would it be possible to re-open this issue?

Hey @tomcarter17 if you setup a repro repo I could take a look at it! But in terms of debugging, when providing statics via static dir in storybook, you should be able to access them via your-storybook-url.com/static-name, so try accessing your-storybook-url.com/mockServiceWorker.js and see if it resolves in the file or gives a 404

from msw-storybook-addon.

Great to know you figured that out @tomcarter17! I'd recommend using the new notation of staticDirs which would have avoided such issue in the first place, as it's shared between dev and build in Storybook!

from msw-storybook-addon.

Actually, as I discovered that we have a wildcard version range specified for the msw peer dependency, as long as you install [email protected], you'll have a build support in Storybook, as 0.29.0 includes the fallback mode feature that enables such support.

Please update and let us know. Thanks.

from msw-storybook-addon.

Hi @kettanaito,

Thank you for the awesome library 🎉

Could you point me to some docs or post here on how to set up msw and msw-storybook for a storybook static site?

from msw-storybook-addon.

Hey, @hyogman. Thank you for the kind words!

Static builds support is enabled by default since [email protected]. As long as you've got that, or higher, version installed, your request handlers will work in static Storybook builds.

You can follow the MSW Storybook Add-on documentation to set the add-on in your Storybook project. There are no extra things necessary.

Note that static support affects static Storybook builds viewed under a file:// protocol (i.e. opening the built index.html in your browser). When serving a build of any kind, MSW worked and works as expected.

from msw-storybook-addon.

Hey @hyogman and @kettanaito. I'm encountering the same issue: the mock service provider isn't being picked up at build time. Upgrading to [email protected] didn't worked so was wondering if there is anything I need to look after?

from msw-storybook-addon.

@kettanaito ohh cool, thanks for letting me know! Do you know what is the timeline for the next release?

from msw-storybook-addon.

@kettanaito - I'm on [email protected] and still unable to see this working. This would be great feature to have! Keep up the epic work.

from msw-storybook-addon.

@josh-biddick I'm using msw 0.35.0 it works under http-server and also if you just open index.html file in browser. However it doesn't work in JetBrais Rider built in server - but it's not big deal I guess.

from msw-storybook-addon.

Hey, @josh-biddick. Could you please share the exact error you're getting during the build? At this point, the static build support should be functional, so the issues you experience may be of a different nature. I'd like to learn more.

from msw-storybook-addon.

Thanks for the quick response @yannbf !

So I have managed to find an error now, that indicates the 404:

and also going directly to http://127.0.0.1:8080/mockServiceWorker.js returns that direct 404. I'm happy to attempt an example repo but may take a little time. In the meantime happy to provide any additional help that'll be useful.

from msw-storybook-addon.

Looks like you're not serving the worker script. Make sure:

• You have generated the script via npx msw init <PUBLIC_DIR>;
• You are using the -s flag for Storybook CLI to serve the public dir.

from msw-storybook-addon.

Unfortunately I've done both of those things. Inside the package scripts I have
"storybook": "start-storybook -s .storybook/public ./styles/images -p 6006", "build-storybook": "build-storybook",

so I did
npx msw init .storybook/public
yarn build-storybook
http-server <project dir>/storybook-static

and I'm still receiving the above 🤔

from msw-storybook-addon.

Great to know, thanks for this! We're currently at 6.3 so definitely a good reason to upgrade!

from msw-storybook-addon.

Happy to hear you've figured it out, @tomcarter17! 🎉 Yes, the -s flag is the tricky one.

from msw-storybook-addon.