updated js and ts project examples for node dynamic remote loading

Author: David Castro

dynamic-remotes-node-javascript/.gitignore

@@ -0,0 +1,4 @@
+.idea
+node_modules
+host/dist
+remote/dist

dynamic-remotes-node-javascript/.nvmrc

@@ -0,0 +1 @@
+v20.12.0

dynamic-remotes-node-javascript/README.md

@@ -0,0 +1,9 @@
+# Dynamic Remotes on Node w/ Javascript
+
+Similar to browser side dynamic remotes.
+
+This allows you to dynamically load remote containers on the server.
+
+`pnpm run start` will initiate a build and http server, then the node will load the remotes. The host will poll for changes on the remote and reload when they are detected.
+
+NOTE: HMR is not supported on the server side yet, so we can't get notified of changes in the remote. We have to poll for changes.

dynamic-remotes-node-javascript/host/package-lock.json

@@ -0,0 +1 @@
+{}

dynamic-remotes-node-javascript/host/package.json

@@ -0,0 +1,58 @@
+const { loadRemote, init } = require('@module-federation/runtime');
+const {performReload, revalidate} = require('@module-federation/node/utils');
+
+console.log('hello from host');
+
+let instance;
+let loadedString;
+let loadedClass;
+let loadedClassInstance;
+
+async function initAndLoad() {
+  await performReload(true)
+
+  instance = init({
+    name: 'host',
+    remotes: [
+      {
+        name: 'remote',
+        entry: 'http://localhost:3002/remoteEntry.js',
+      },
+    ],
+  });
+
+
+  loadRemote('remote/string').then(value => {
+    loadedString = value;
+    console.log('loaded string', loadedString);
+  });
+
+  loadRemote('remote/class').then(async value => {
+    loadedClass = value;
+    loadedClassInstance = new value();
+
+    console.log('current loaded class', loadedClass);
+    console.log('current loaded class test value', loadedClassInstance.getTestValue());
+    console.log('current loaded class run test', await loadedClassInstance.runTest());
+  });
+}
+
+initAndLoad();
+
+setInterval(async () => {
+  console.log('host(): checking remote for updates');
+
+  // NOTE: this is called the first time an update is detected on the remote and never again
+  // NOTE: had to patch hot-reload.js to get this to not throw an error
+  // we automatically reset require cache, so the reload callback is only if you need to do something else
+  const shouldReload = await revalidate();
+
+  // do something extra after revalidation
+  if (shouldReload) {
+    // reload the server
+    console.log('host(): should reload');
+    initAndLoad();
+  } else {
+    console.log('host(): should not reload');
+  }
+}, 5000);

dynamic-remotes-node-javascript/host/src/index.js

@@ -0,0 +1,25 @@
+const { UniversalFederationPlugin } = require('@module-federation/node');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'development',
+  target: 'async-node',
+  externals: [],
+  output: {
+    publicPath: 'http://localhost:3001/',
+    library: { type: 'commonjs-module' },
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new UniversalFederationPlugin({
+      remoteType: 'script',
+      isServer: true,
+      name: 'host',
+      useRuntimePlugin: true,
+      exposes: {
+        './noop': './src/noop.js',
+      },
+    }),
+  ],
+};