STRIPES-861 integration of module federation logic in the main branch.#173
Merged
STRIPES-861 integration of module federation logic in the main branch.#173
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.
JohnC-80
changed the title
…k into STRIPES-861-int
…k into STRIPES-861-int
zburke
approved these changes
Feb 3, 2026
|
zburke
approved these changes
Feb 3, 2026
JohnC-80
added a commit
to folio-org/stripes-core
that referenced
this pull request
Feb 3, 2026
#1679) This PR takes the logic from #105 and implements backward compatibility/opt-in behavior to module federation. Huge thanks to @mkuklis so long ago for his initial lift! This works with the [Stripes-webpack PR](folio-org/stripes-webpack#173) and [STRIPES-CLI PR](folio-org/stripes-cli#392) to run a federated ui platform. The changes in this PR implement an `<EntitlementLoader>` component that, provided an `entitlementUrl` via `stripes-config.okapi`, will fetch its list of modules from a dynamic source containing URL's for those module bundles. The bundles are then prefetched individually, translations, icons, loaded. The component passes through any modules provided via the monolithic build `stripes-config` setup. Adds `addIcon` and adjusts `setTranslations` reducers to accumulate translations from async remote modules (loaded all together up front rather than on-demand at instanciation points such as AppRoutes and Settings (so the synchronous syntax of those implementations remain the same.) Try the script to clone applicable branches, a few modules and set up a workspace: ````bash mkdir -p module_federation && cd module_federation # checkout all stripes modules stripes_modules=( webpack core cli ) for m in "${stripes_modules[@]}"; do git clone "https://github.com/folio-org/stripes-$m.git" --branch STRIPES-861-int & done git clone "https://github.com/folio-org/stripes-ui.git" git clone "https://github.com/folio-org/ui-users.git" & git clone "https://github.com/folio-org/ui-inventory.git" & wait # create workspace via package.json cat > package.json <<EOF { "private": true, "workspaces": [ "*" ] } EOF # create stripes.config cat > stripes.config.js <<EOF module.exports = { okapi: { url: 'https://folio-snapshot-okapi.dev.folio.org', tenant: 'diku', entitlementUrl: 'http://localhost:3001/registry' }, config: { logCategories: 'core,path,action,xhr', logPrefix: '--', showPerms: false, hasAllPerms: false, languages: ['en'], suppressIntlErrors: true, }, modules: { } }; EOF # install dependencies yarn ```` Then you can: Build a module-federation host app (from the workspace level): ``` yarn stripes build --federate stripes.config.js ``` Serve the host app (dev mode from the workspace level) ``` yarn stripes serve --federate stripes.config.js ``` Build module bundle for static hosting (at the ui-module level) ``` yarn stripes build --federate ``` Serving the federated ui-module (dev mode at the ui-module level) ``` yarn stripes serve --federate ``` Have fun! 🎉🚀🎸🤘 --------- Co-authored-by: Michal Kuklis <michal.kuklis@gmail.com> Co-authored-by: Zak Burke <zburke@ebsco.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR takes the logic from #105 and places it behind a conditional on an
okapi.discoveryUrlfield in thestripes-configobject.Further adjustment -
StripesTranslationPluginaccumulates translations from includedstripesDeps(stripes-acq-components, etc) so that those can be loaded at runtime when the dependent ui-module's translations are loaded.StripesTranslationPlugincontains a conditional where it doesn't piggyback ontostripesConfigPluginfor federated module builds.LocalFederationPluginis used for spinning up a local set of remotes of the modules via localstripes-config. It loops through the modules and spawns afederateprocess. Ifmodulesis empty, this does nothing.Conforms module federation behavior to
serve --federateandbuild --federatecommands.Will pull shared dependencies from the locally installed copy of
stripes-core, if possible, falling back to reach out tostripes-coreon github if the localstripes-corecan't be required.Module Usage
Clone,
yarnyour module, and in your console of choice (within the module directory):It will generate an
outputdirectory with your built module's files.Module build troubleshooting
Typescript
'@types/react' resolution... react's types have a greedy dependency version (*). If it isn't controlled via
resolutions, it will install types for v19 even if v18 is used by your project. The solution is to set theresolutionin your project's package.json to ensure that the correct version is installed: Platform-complete does this and now that builds are possible at the module level, so should you!in package.json:
Every module
Ensure that your
mainkey in package.json points to an existing file. Conventionally, this issrc/index.jsor (TS)src/index.tsx.The module-level build sets this file as its webpack entry point. If this doesn't exist, the build will fail.
React context:
As of this writing, libraries like
stripes-acq-components,stripes-inventory-components, etc do not have to be independently built for module-federation. They are dependencies and can be used as normal. If a particular package isn't provided as a singleton by the host app, then a module will used its own version. This can/will cause duplicates of the same library to be loaded, and this will cause a problem with React context. If one module has a provider, and loads a plugin module within, which uses the same context, the separate dependencies could end up looking at different instances of the context, which will not work and could result in ui-crashes and empty context values. The solution we're investigating is to make use ofreact-singleton-contextin the libraries that we can control. For more info: npm module react-singleton-contextOther context-heavy dependencies that cross the boundaries between UI modules should be marked as singletons with the host app.