search

single-spa / standalone-single-spa-webpack-plugin

A webpack plugin for running microfrontends in standalone mode.
MIT License
41 stars 7 forks source link

Not entirely clear how and where to use this #8

Closed hogarthww-labs closed 3 years ago

hogarthww-labs commented 3 years ago

The plugin takes an object which is a configuration for a single micro frontend (module) with a set of activeWhen condition only for that micro frontend?

It includes references to an import map with multiple entries (which could include multiple other micro frontends?)

How would we use this plugin for an entire single-spa with 5-10 micro frontends published to our IMD?

Is there a sample application leveraging this plugin with a webpack configuration?

Thanks

filoxo commented 3 years ago

The plugin takes an object which is a configuration for a single micro frontend (module) with a set of activeWhen condition only for that micro frontend?

Correct, as noted in the README.

It includes references to an import map with multiple entries (which could include multiple other micro frontends?)

This doesn't make sense to me. The importMapUrl option accepts only one URL, which is useful for enabling cross-microfrontend imports. The importMap option can be thought of as local overrides and isn't required. By their nature, yes import maps are going to point to multiple modules.

How would we use this plugin for an entire single-spa with 5-10 micro frontends published to our IMD?

You wouldn't. This is intended to enable a standalone environment for local development of individual applications, not the entirety of your org's microfrontends.

If you're asking how you would implement this across all of your microfrontends, I'd recommend creating a shared webpack config that they would all use so that they can get configuration changes as needed.

Is there a sample application leveraging this plugin with a webpack configuration?

Yep! Our react-microfrontends example has it as a separate npm script. Also, our shared webpack-config-single-spa might be a good reference too.

I'm going to close this as I think your question has been answered and there isn't an issue in the plugin, but feel free to ask any other questions.

hogarthww-labs commented 3 years ago

Cool :) Thank you so much @filoxo

"This is intended to enable a standalone environment for local development of individual applications" wasn't entirely clear from the readme. Also sometimes a bit confusing what app vs micro frontend means.

"Parcels are an advanced feature of single-spa. We recommend that you use applications as the primary type of micro frontend in your architecture." So app is just an alias for micro frontend, not for the entire app of multiple micro frontends.

PS: Would be great if you could add an entry/section to the single-spa documentation site about this plugin. Didn't see it there when I searched for it. Cheers :)

joeldenning commented 3 years ago

Agreed - we could add it to the Local Development section of the recommended setup. I'll add it there. https://single-spa.js.org/docs/recommended-setup#local-development

joeldenning commented 3 years ago

Added a bit of documentation at https://github.com/single-spa/single-spa.js.org/pull/384

hogarthww-labs commented 3 years ago

Thank you so much :)