Add MSW

[alexanderflink]

We should incorporate @adamsoderstrom 's work and get MSW into create-ignite-app. Both in Storybook and in the Next app. This should make it much easier to get up and running with a project since you would have an actual api to work with from the get-go. I suggest separating the actual mock data into their own packages in the accelerator (e.g @noaignite/centra-msw-mock)

[adamsoderstrom]

Sounds great, @alexanderflink!

Here's a suggestion of a "To-Do" list:

• [ ] Ensure MSW works with Node 18

This is in progress: https://github.com/mswjs/interceptors/pull/283

• [ ] Package the initiation of the MSW

My previous experience of setting up a MSW in a client project via Next.js was bit of a challenge. As of this writing, i haven't been able to conditionally import the MSW, for example with a env variable as a condition. This is necessary, hence we don't want this to increase our bundle size of the application.

• [ ] Convert all __mock__ files from .js to .ts with their respective types

Using .ts for both mock data and MSW API endpoints will make it harder to have committed out-dated mock data.

• [ ] Ensure MSW isn't bundled in production

[maeertin]

I'm also really looking forward to this being implemented nicely 😍 Super nice work so far @adamsoderstrom! Let's investigate further, when possible, how we can have the msw not being bundled with the production app.

[alexanderflink]

@adamsoderstrom have you checked that MSW is actually bundled in production? We should do some testing with next-bundle-analyzer just to be sure this is an issue!

[adamsoderstrom]

@adamsoderstrom have you checked that MSW is actually bundled in production? We should do some testing with next-bundle-analyzer just to be sure this is an issue!

I haven't! Will add it as a task.

[adamsoderstrom]

• [ ] Ensure MSW works with Node 18

This is in progress: https://github.com/mswjs/interceptors/pull/283

Some progress has been made on this. As of https://github.com/mswjs/msw/commit/049f21df0e7c1b9811e083e83b7534cf0a06021a, the global fetch function should be in place.

But, as stated in this comment:

Also, please bear in mind that the lack of official Node 18 support doesn't mean MSW won't work on Node 18. I know a few projects where it works without issues on Node 18. It really depends on the APIs you're using (for instance, it doesn't support the global fetch at the moment) so I highly encourage you to give it a try before concluding that it blocks you.

I think we're ready to atleast make a drafted PR to create-ignite-app in regards to the MSW.

[adamsoderstrom]

Some new updates in regards to MSW's support of Node 18! Will be release in the next major.

https://github.com/mswjs/msw/issues/1388#issuecomment-1545551087

[maeertin]

Closing PR as no longer relevant as "cia" is now purely a documentation app.