STRIPES-861: Setup module federation #105

mkuklis · 2023-04-25T13:42:07Z

https://issues.folio.org/browse/STRIPES-861

POC for Webpack Module Federation.

This PR is associated with additional PRs:

stripes-core STRIPES-861: Setup module federation stripes-core#1303
stripes-ui STRIPES-861: Setup module federation stripes-ui#6
stripes-cli STRIPES-861: Setup module federation stripes-cli#315

And a new repo:

https://github.com/folio-org/stripes-shared-context

How to test it

Please copy and run the script below:

mkdir -p module_federation && cd module_federation

# checkout all stripes modules
stripes_modules=(
  webpack
  ui
  cli
  core
)

for m in "${stripes_modules[@]}"; do
  git clone "https://github.com/folio-org/stripes-$m.git" --branch STRIPES-861 &
done

git clone "https://github.com/folio-org/stripes-shared-context.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',
  },
  config: {
    logCategories: 'core,path,action,xhr',
    logPrefix: '--',
    showPerms: false,
    hasAllPerms: false,
    languages: ['en'],
    suppressIntlErrors: true,
  },
  modules: {
  }
};
EOF

# install dependencies
yarn

Start host with yarn stripes ./stripes.config.js
Open http://localhost:3000 to make sure host is up and running (this will also start a local registry on port 3001 under http://localhost:3001/registry)
Open a separate terminal window and run cd ui-users && yarn stripes federate. This will start a remote on port 3002
Go back to http://localhost:3000 and refresh the screen. ui-users should appear on the menu.
Open a separate terminal window and run cd ui-inventory && yarn stripes federate. This will start a remote on port 3003
Go back to http://localhost:3000 and refresh the screen. ui-inventory should appear on the menu.
Open http://localhost:3001/registry. Two modules should be listed in the registry.
Stop ui-inventory in the terminal and refresh the host screen. ui-inventory should disappear from the menu.
Open http://localhost:3001/registry the ui-inventory should be removed from the list.

github-actions · 2023-04-25T13:42:31Z

Jest Unit Test Statistics

0 tests ±0 0 ✔️ ±0 0s ⏱️ ±0s
0 suites ±0 0 💤 ±0
0 files ±0 0 ❌ ±0

Results for commit ca0b291. ± Comparison against base commit 88fe37d.

♻️ This comment has been updated with latest results.

github-actions · 2023-04-25T13:42:48Z

BigTest Unit Test Statistics

73 tests ±0 68 ✔️ - 5 0s ⏱️ ±0s
39 suites ±0   0 💤 ±0
  1 files ±0   5 ❌ +5

For more details on these failures, see this check.

Results for commit ca0b291. ± Comparison against base commit 88fe37d.

♻️ This comment has been updated with latest results.

sonarqubecloud · 2024-09-17T23:20:05Z

Quality Gate failed

Failed conditions
4 Security Hotspots
16.6% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

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

github-actions · 2024-12-04T20:01:44Z

Jest Unit Test Results

0 tests ±0 0 ✅ ±0 0s ⏱️ ±0s
0 suites ±0 0 💤 ±0
0 files ±0 0 ❌ ±0

Results for commit 12613ed. ± Comparison against base commit a216c30.

github-actions · 2024-12-04T20:01:44Z

Jest Unit Test Results

0 tests ±0 0 ✅ ±0 0s ⏱️ ±0s
0 suites ±0 0 💤 ±0
0 files ±0 0 ❌ ±0

Results for commit 12613ed. ± Comparison against base commit a216c30.

sonarqubecloud · 2024-12-04T20:02:41Z

Quality Gate failed

Failed conditions
3 Security Hotspots
0.0% Coverage on New Code (required ≥ 80%)
14.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

github-advanced-security · 2024-12-04T20:02:43Z

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

webpack/registryServer.js

+      const { name } = metadata;
+
+      registry.remotes[name] = metadata;
+      res.status(200).send(`Remote ${name} metadata updated`);


webpack/registryServer.js

+    app.get('/registry', (_, res) => res.json(registry));
+
+    // return entire registry for humans
+    app.get('/code', (_, res) => res.send(`<pre>${JSON.stringify(registry, null, 2)}</pre>`));


webpack/registryServer.js

+
+      delete registry.remotes[name];
+
+      res.status(200).send(`Remote ${name} removed`);


mkuklis and others added 15 commits October 28, 2024 16:30

STRIPES-861: Setup module federation

bc644ce

Cleanup

b9431f1

Cleanup

467f390

cleanup

7c3576a

Use shutdown hook

2deed9e

Cleanup

49189bd

Cleanup

12cc324

Cleanup

60b5dae

Add required version to shared singletons

97ba155

Start remotes automatically

8c47f56

Expose icons via public endpoint

84c0199

react-query provides a context, so must be a singleton

54db9c9

current versions

42cac16

separate handling of stripes-components and application icons

12613ed

Icons in stripes-components are imported as components whereas those in applications are just resources, so we need to load them differently.

zburke force-pushed the STRIPES-861 branch from ca0b291 to 12613ed Compare December 4, 2024 20:00

github-advanced-security bot found potential problems Dec 4, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

STRIPES-861: Setup module federation #105

STRIPES-861: Setup module federation #105

mkuklis commented Apr 25, 2023 •

edited

Loading

github-actions bot commented Apr 25, 2023 •

edited

Loading

github-actions bot commented Apr 25, 2023 •

edited

Loading

sonarqubecloud bot commented Sep 17, 2024

github-actions bot commented Dec 4, 2024

github-actions bot commented Dec 4, 2024

sonarqubecloud bot commented Dec 4, 2024

github-advanced-security bot commented Dec 4, 2024


		delete registry.remotes[name];

		res.status(200).send(`Remote ${name} removed`);

STRIPES-861: Setup module federation #105

Are you sure you want to change the base?

STRIPES-861: Setup module federation #105

Conversation

mkuklis commented Apr 25, 2023 • edited Loading

How to test it

github-actions bot commented Apr 25, 2023 • edited Loading

Jest Unit Test Statistics

github-actions bot commented Apr 25, 2023 • edited Loading

BigTest Unit Test Statistics

sonarqubecloud bot commented Sep 17, 2024

Quality Gate failed

github-actions bot commented Dec 4, 2024

Jest Unit Test Results

github-actions bot commented Dec 4, 2024

Jest Unit Test Results

sonarqubecloud bot commented Dec 4, 2024

Quality Gate failed

github-advanced-security bot commented Dec 4, 2024

mkuklis commented Apr 25, 2023 •

edited

Loading

github-actions bot commented Apr 25, 2023 •

edited

Loading

github-actions bot commented Apr 25, 2023 •

edited

Loading