STRWEB-139 Use non-webpack module federation plugin.#176
Conversation
* map the `sounds` directory for remote applications, analogous to how translations and icons are served * provide `/code` to make the registry human-readable * catch and display startup errors in case humans make stupid coding mistakes and need help finding them
Icons in stripes-components are imported as components whereas those in applications are just resources, so we need to load them differently.
zburke
left a comment
zburke
left a comment
There was a problem hiding this comment.
The description says federation now works "without a config file", but that did not work for me. Maybe some config/documentation details are missing?
In a platform, yarn stripes [build|serve] --federate still complains
Warning: Building a platform without a stripes configuration. Did you forget to include "stripes.config.js"?
Since building without a stripes configuration is **exactly the point of this work we should suppress that warning when --federate is present.
Running yarn stripes serve --federate (i.e. without the positional for stripes.config.js) does not start the local registry.
I really appreciate the comments in module-federation-config.js explaining both what it does and why specific config flags are in place. Our code, specifically our config code, needs more documentation like this!
|
@zburke The no-config messaging resides in |
|
STCLI PR: folio-org/stripes-cli#394 |
… discoveryConfig if the --federate flag is used.
|
zburke
left a comment
zburke
left a comment
There was a problem hiding this comment.
This is working for me now 🎉 . Code changes look great. We should consider lifting some of the new comments (THANK YOU for the comments!) up into documentation, maybe in the README here, most probably in stripes-cli (where there is extensive documentation about dev-hosting already), and possibly in stripes-hub as well.
| }), | ||
| new webpack.EnvironmentPlugin(['NODE_ENV']), | ||
| new RemoveEmptyScriptsPlugin(), | ||
| new webpack.ManifestPlugin({ entrypoints: true }), |
There was a problem hiding this comment.
Add a comment explaining why we need this plugin? If it's self-evident and I'm just uninformed when it comes to webpack-foo, I totally accept that.
| // runtime plugins of the host are not automatically shared with remotes, so we | ||
| // inject them via another plugin. | ||
| // Without this, the remotes would all have to be rebuilt to pick up changes | ||
| // to runtime plugins. With this, we only have to rebuild the host app. | ||
| runtimePlugins: [path.resolve(__dirname, 'webpack', './remote-runtime-plugin')], |
There was a problem hiding this comment.
I think I understand this comment, but an example and a link to documentation would be helpful.
| } else { | ||
| // in development mode, setup the devserver... | ||
| config.devtool = 'inline-source-map'; | ||
| // turning off hot reloading and overlay since we're using the dev server for hosting static files rather than actual dev work. |
There was a problem hiding this comment.
This comment feels super important. Maybe it belongs in the README here or in stripes-cli or stripes-hub?
| exposes: { | ||
| './MainEntry': mainEntry, | ||
| }, |
There was a problem hiding this comment.
I feel like we need a "Warning! Lark's Vomit!" comment here to call out this link between stripes-core's EntitlementLoader and the configuration here in stripes-webpack. Either that, or we need a way to export the config here and consume it there, i.e. anything that reduces the chance that somebody will decide "Oh, let's call this main-entry.js" and not realize the consequences.
There was a problem hiding this comment.
The file name can be named whatever they like, so long as it is referenced correctly in the ui-module's package.json as their main entry. MainEntry is like a named export that stripes-webpack sets up here to catch on the EntitlementLoader side. Writing up the comment for clarification. If the main entry in their package.json doesn't line up, the ui-module build will fail.
* STRIPES-861: Setup module federation * Cleanup * Cleanup * cleanup * Use shutdown hook * Cleanup * Cleanup * Cleanup * Add required version to shared singletons * Start remotes automatically * Expose icons via public endpoint * react-query provides a context, so must be a singleton * STCOR-726 map sounds directory for remote applications * map the `sounds` directory for remote applications, analogous to how translations and icons are served * provide `/code` to make the registry human-readable * catch and display startup errors in case humans make stupid coding mistakes and need help finding them * current versions * separate handling of stripes-components and application icons Icons in stripes-components are imported as components whereas those in applications are just resources, so we need to load them differently. * provide registry url in stripes-config * collect translations from 'StripesDeps' modules in built translations * get the app's main entry from package.json * ensure there are aliases before member access * expand the singletons for the platform * migrate mf plugin/libraries to @module-federation/enhanced * bump webpack-dev-server version * restore stripes-config-plugin from main * turn off hot reloading in module-level dev server * turn off hot reloading in devtools for now * use default discoveryUrl for local * fussing with attempting to override shares with host dependencies * re-add test folder * sync with STCOR STRWEB-139 changes * add runtimePlugin for host override * remove auto version from modules * single runtime from host * set external runtime to true for modules * exclude host-shares from module bundle * add further optimization to module bundle, remove runtime plugins * add remote runtime plugin to absorb plugins of host at runtime * push host plugins to remote runtime * collect debug info, cleanup logging in runtime plugins * rename stripes runtime host plugin, tests * remove the junky test artifacts * consolidate modfed configs to a single file. Add semver to runtime plugin dep check * tweak comments, remove the axios dep * prefer spread syntax in cli configs. Alphabetize config values in mod-fed-config * shore up the runtime logic with some optional chaining * use default discoveryUrl for platform host app 'serve' command * add console messaging for build command * re-add manifest plugin * address sonar-dad concerns * minor: whtspace * rework no-config discoverUrl use in serve.js * remove all references to defaultTenant entry * config: concatenateModules: false * if no config discoveryUrl provided in config file, inject the default discoveryConfig if the --federate flag is used. * re-add splitChunks to bundle in order to include dayJS chunks in main bundles * resolve failures with mf-runtime-plugin tests --------- Co-authored-by: Michal Kuklis <michal.kuklis@gmail.com> Co-authored-by: Zak Burke <zburke@ebsco.com>
3 participants
This non-webpack version of module federation is maintained by the original implementor of the technology.
@module-federation/enhancedimplements runtime hooks that can be used to affect module-federation logic for resolving shares, working with remotes, debugging, etc. You can learn more at module-federation documentation.Changes in this PR:
stripes serve --federate:localhost:3001/registry)--federateflag will spin up the local registry. A config will still be necessary for reaching out to a hosted environment's okapi.