Module Federation

Author: kirill-konshin

.travis.yml

@@ -21,13 +21,13 @@ deploy:
   on:
     all_branches: true
     condition: $TRAVIS_TAG != "" && $TRAVIS_TAG != *"-"*
-    repo: ringcentral/ringcentral-web-phone
+    repo: ringcentral/web-apps
 - provider: script
   script: yarn publish:release ${TRAVIS_TAG} --yes --dist-tag next
   skip_cleanup: true
   on:
     all_branches: true
     condition: $TRAVIS_TAG == *"-"*
-    repo: ringcentral/ringcentral-web-phone
+    repo: ringcentral/web-apps
 
 after_success: yarn test:coverage

README.md

@@ -0,0 +1,22 @@
+{
+  "name": "@web-apps/fed",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "7.10.2",
+    "@babel/preset-react": "7.10.1",
+    "babel-loader": "8.1.0",
+    "serve": "11.3.0",
+    "webpack": "^5.0.0-beta.17",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.11.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "dependencies": {
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "moment": "^2.24.0"
+  }
+}

demo/fed/package.json

@@ -0,0 +1,16 @@
+import React from 'react';
+import moment from 'moment';
+
+export default ({foo}) => (
+    <div
+        style={{
+            borderRadius: '4px',
+            padding: '2em',
+            backgroundColor: 'red',
+            color: 'white',
+        }}
+    >
+        <h2>App 2 Widget: {foo}</h2>
+        <p>{moment().format('MMMM Do YYYY, h:mm:ss a')}</p>
+    </div>
+);

demo/fed/src/App.js

@@ -0,0 +1,8 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default node => {
+    ReactDOM.render(<App foo={node.getAttribute('foo')} />, node);
+    return () => ReactDOM.unmountComponentAtNode(node);
+};

demo/fed/src/index.js

@@ -0,0 +1,47 @@
+const {ModuleFederationPlugin} = require('webpack').container;
+const path = require('path');
+
+module.exports = {
+    entry: './src/index',
+    mode: 'development',
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        port: process.env.REACT_APP_FED_PORT,
+    },
+    output: {
+        publicPath: `http://localhost:${process.env.REACT_APP_FED_PORT}/`,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+                options: {
+                    presets: ['@babel/preset-react'],
+                },
+            },
+        ],
+    },
+    plugins: [
+        new ModuleFederationPlugin({
+            name: 'web_app_federation',
+            library: {type: 'var', name: 'web_app_federation'},
+            filename: 'remoteEntry.js',
+            exposes: {
+                './App': './src/App',
+                './index': './src/index',
+            },
+            shared: {
+                'react-dom': 'react-dom',
+                moment: '^2.24.0',
+                react: {
+                    import: 'react', // the "react" package will be used a provided and fallback module
+                    shareKey: 'react', // under this name the shared module will be placed in the share scope
+                    shareScope: 'default', // share scope with this name will be used
+                    singleton: true, // only a single version of the shared module is allowed
+                },
+            },
+        }),
+    ],
+};

demo/fed/webpack.config.js

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "PORT=$REACT_APP_HOST_PORT react-scripts start"
+    "start": "webpack-dev-server"
   },
   "browserslist": [
     "IE 11"
@@ -20,6 +20,14 @@
     "react-router-dom": "5.1.2"
   },
   "devDependencies": {
-    "react-scripts": "3.0.1"
+    "@babel/core": "7.10.2",
+    "@babel/preset-react": "7.10.1",
+    "babel-loader": "8.1.0",
+    "css-loader": "^3.5.3",
+    "style-loader": "^1.2.1",
+    "html-webpack-plugin": "^4.3.0",
+    "webpack": "^5.0.0-beta.17",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.11.0"
   }
 }

demo/host/package.json

@@ -0,0 +1,15 @@
+import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
+import '@webcomponents/webcomponentsjs';
+import React from 'react';
+import {render} from 'react-dom';
+import Router from './Router';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import '@ringcentral/web-apps-host-css/styles.css';
+import './index.css';
+
+const rootEl = document.getElementById('app');
+
+render(<Router />, rootEl);
+
+if (module.hot) module.hot.accept();

demo/host/src/bootstrap.js

@@ -1,15 +1 @@
-import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
-import '@webcomponents/webcomponentsjs';
-import React from 'react';
-import {render} from 'react-dom';
-import Router from './Router';
-
-import 'bootstrap/dist/css/bootstrap.css';
-import '@ringcentral/web-apps-host-css/styles.css';
-import './index.css';
-
-const rootEl = document.getElementById('app');
-
-render(<Router />, rootEl);
-
-if (module.hot) module.hot.accept();
+import('./bootstrap');

demo/host/src/index.js

@@ -52,4 +52,20 @@ export const appRegistry = {
             url + `/main.js`,
         ],
     },
+    federation: {
+        type: 'global',
+        getUrl: async (url = `http://localhost:${process.env.REACT_APP_FED_PORT}`) => url + '/remoteEntry.js',
+        options: {
+            federation: true,
+        },
+    },
+    federationDirect: {
+        type: 'global',
+        getUrl: async (url = `http://localhost:${process.env.REACT_APP_FED_PORT}`) => url + '/remoteEntry.js',
+        options: {
+            federation: true,
+            module: './App',
+            scope: 'web_app_federation',
+        },
+    },
 };