mock service worker integration in storybook-build

[pedrohba1]

First of all, thanks for creating this addon, It's being really useful overall. However, I have a specific use case where when building storybook with the default build-storybook command, which generates the storybook-static folder, I want to be able to get data from the mock service provider.
Right now, when the build finishes, the mock service provider doesn't work (can't fetch any data).

How could I make it work within the build?

I want this behaviour because I can just send to my clients a link to check how the frontend is looking right now, which is the storybook build, and having no mocks in it will provide them nothing useful.

[kettanaito]

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.

[kettanaito]

Actually, as I discovered that we have a wildcard version range specified for the msw peer dependency, as long as you install msw@0.29.0, 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.

[hyogman]

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?

[kettanaito]

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

Static builds support is enabled by default since msw@0.29.0. 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.

[oanaOM]

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

[kettanaito]

@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 msw@0.29.0 didn't help, I recommend waiting for the next release of this add-on. Thanks.

[oanaOM]

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

[ghost]

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

[KrzychuR]

@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.

[kettanaito]

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.

[tomcarter17]

@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?

[yannbf]

@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

[tomcarter17]

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.

[kettanaito]

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.

[tomcarter17]

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 🤔

[tomcarter17]

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!

[yannbf]

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!

[tomcarter17]

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

[kettanaito]

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