first commit

timothymalcham · Jun 17, 2020 · c285820 · c285820
commit c285820
Show file tree

Hide file tree

Showing 28 changed files with 3,989 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+Demo of webpack 5 module federation micro frontends.
+
+do `yarn && yarn start` to spin up all three apps.
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "micro-frontend-module-federation-demo",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "start": "concurrently \"wsrun --parallel start\" \"wsrun --parallel serve\""
+  },
+  "devDependencies": {
+    "wsrun": "^5.2.0"
+  },
+  "dependencies": {
+    "concurrently": "^5.1.0"
+  }
+}
diff --git a/packages/.DS_Store b/packages/.DS_Store
diff --git a/packages/01-host/package.json b/packages/01-host/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "01-host",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-router-dom": "^5.1.2",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11"
+  },
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3001"
+  }
+}
diff --git a/packages/01-host/public/index.html b/packages/01-host/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="http://localhost:3002/remoteEntry.js"></script>
+    <script src="http://localhost:3003/remoteEntry.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/01-host/src/App.jsx b/packages/01-host/src/App.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+import Page1 from "./pages/page1";
+import Page2 from "./pages/page2";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div>
+        <ul>
+          <li style={{ display: "block" }}>
+            <Link to="/">Host / App #1</Link>
+          </li>
+          <li style={{ display: "block" }}>
+            <Link to="/page1">Page 1 / App #2</Link>
+          </li>
+          <li style={{ display: "block" }}>
+            <Link to="/page2">Page 2 / App #3</Link>
+          </li>
+        </ul>
+      </div>
+      <hr />
+      <Switch>
+        <Route path="/">
+          This is the container from the host app
+          <Route path="/page1">
+            <Page1 />
+          </Route>
+          <Route path="/page2">
+            <Page2 />
+          </Route>
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/packages/01-host/src/bootstrap.jsx b/packages/01-host/src/bootstrap.jsx
@@ -0,0 +1,4 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/packages/01-host/src/index.jsx b/packages/01-host/src/index.jsx
@@ -0,0 +1 @@
+import("./bootstrap");
diff --git a/packages/01-host/src/pages/page1.jsx b/packages/01-host/src/pages/page1.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Page = React.lazy(() => import("app_two/Page"));
+
+const Page1 = () => {
+  return (
+    <div>
+      <h1>Page 1</h1>
+      <React.Suspense fallback="Loading page from App #2">
+        <Page />
+      </React.Suspense>
+    </div>
+  );
+};
+
+export default Page1;
diff --git a/packages/01-host/src/pages/page2.jsx b/packages/01-host/src/pages/page2.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Message = React.lazy(() => import("app_three/Message"));
+
+const Page2 = () => (
+  <div>
+    <h1>Page 2</h1>
+    <React.Suspense fallback="Loading message from app #3">
+      <Message />
+    </React.Suspense>
+  </div>
+);
+
+export default Page2;
diff --git a/packages/01-host/webpack.config.js b/packages/01-host/webpack.config.js
@@ -0,0 +1,59 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  entry: "./src/index",
+  cache: false,
+
+  mode: "development",
+  devtool: "source-map",
+
+  optimization: {
+    minimize: false,
+  },
+
+  output: {
+    publicPath: "http://localhost:3001/",
+  },
+
+  resolve: {
+    extensions: [".jsx", ".js", ".json"],
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: require.resolve("babel-loader"),
+        options: {
+          presets: [require.resolve("@babel/preset-react")],
+        },
+      },
+    ],
+  },
+
+  plugins: [
+    new ModuleFederationPlugin({
+      // define the host app
+      name: "app_one",
+      library: { type: "var", name: "app_one" },
+      // this file will be automatically generated and put in /dist
+      // this is the file that index.html will use to render the app
+      filename: "remoteEntry.js",
+      // define the other micro-frontends
+      remotes: {
+        app_two: "app_two",
+        app_three: "app_three",
+      },
+      // determines what the other apps can load/share
+      exposes: {
+        AppContainer: "./src/App",
+      },
+      // shared dependencies, helpful to make builds smaller
+      shared: ["react", "react-dom", "react-router-dom"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+    }),
+  ],
+};
diff --git a/packages/02-another-app/package.json b/packages/02-another-app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "02-another-app",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11"
+  },
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3002"
+  }
+}
diff --git a/packages/02-another-app/public/index.html b/packages/02-another-app/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="http://localhost:3001/remoteEntry.js"></script>
+</head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/02-another-app/src/App.jsx b/packages/02-another-app/src/App.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import Routes from "./Routes";
+const AppContainer = React.lazy(() => import("app_one/AppContainer"));
+
+const App = () => {
+  return (
+    <div>
+      <React.Suspense fallback="Working on loading the container for the app from the host app">
+        <AppContainer routes={Routes} />
+      </React.Suspense>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/02-another-app/src/Page.jsx b/packages/02-another-app/src/Page.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function Page() {
+  return (
+    <div>
+      <h2>I'm a page from App #2!!</h2>
+      <iframe
+        src="https://giphy.com/embed/YlPeYXasYEPpC"
+        width="480"
+        height="270"
+        frameBorder="0"
+        class="giphy-embed"
+        allowFullScreen
+      ></iframe>
+      <iframe
+        src="https://giphy.com/embed/VelhDI6pdStJ4fvAtJ"
+        width="480"
+        height="270"
+        frameBorder="0"
+        class="giphy-embed"
+        allowFullScreen
+      ></iframe>
+      <iframe
+        src="https://giphy.com/embed/oYtVHSxngR3lC"
+        width="480"
+        height="347"
+        frameBorder="0"
+        class="giphy-embed"
+        allowFullScreen
+      ></iframe>
+      <iframe
+        src="https://giphy.com/embed/5VKbvrjxpVJCM"
+        width="480"
+        height="384"
+        frameBorder="0"
+        class="giphy-embed"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+}
diff --git a/packages/02-another-app/src/Routes.js b/packages/02-another-app/src/Routes.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+
+import Page from "./Page";
+
+const Routes = () => (
+  <Switch>
+    <Route path="/">
+      <Page />
+    </Route>
+  </Switch>
+);
+
+export default Routes;
diff --git a/packages/02-another-app/src/bootstrap.jsx b/packages/02-another-app/src/bootstrap.jsx
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/packages/02-another-app/src/index.js b/packages/02-another-app/src/index.js
@@ -0,0 +1 @@
+import("./bootstrap");
diff --git a/packages/02-another-app/webpack.config.js b/packages/02-another-app/webpack.config.js
@@ -0,0 +1,53 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  entry: "./src/index",
+  cache: false,
+
+  mode: "development",
+  devtool: "source-map",
+
+  optimization: {
+    minimize: false,
+  },
+
+  output: {
+    publicPath: "http://localhost:3002/",
+  },
+
+  resolve: {
+    extensions: [".jsx", ".js", ".json"],
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: require.resolve("babel-loader"),
+        options: {
+          presets: [require.resolve("@babel/preset-react")],
+        },
+      },
+    ],
+  },
+
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app_two",
+      library: { type: "var", name: "app_two" },
+      filename: "remoteEntry.js",
+      exposes: {
+        Page: "./src/Page",
+      },
+      remotes: {
+        app_one: "app_one",
+      },
+      shared: ["react", "react-dom", "react-router-dom"],
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+      chunks: ["main"],
+    }),
+  ],
+};
diff --git a/packages/03-another-app/package.json b/packages/03-another-app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "03-another-app",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11"
+  },
+  "scripts": {
+    "start": "webpack --watch",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3003"
+  }
+}
diff --git a/packages/03-another-app/public/index.html b/packages/03-another-app/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Demo of webpack 5 module federation micro frontends.

		do `yarn && yarn start` to spin up all three apps.