WIP S3 streaming federation (module-federation#19)

* feat: use mock s3 to stream federated code

* refactor: use SSR demo as base app

Author: ScriptedAlchemy

streamed-federation/README.md

@@ -0,0 +1,13 @@
+# Basic One-Way Example
+
+This example demos a basic host application loading remote component.
+
+- `website1` is the host application.
+- `website2` standalone application which exposes `Header` component.
+
+# Running Demo
+
+Run `yarn start`. This will build and serve both `website1` and `website2` on ports 3001 and 3002 respectively.
+
+- [localhost:3001](http://localhost:3001/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)

streamed-federation/package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "yarn build && yarn serve",
+    "build": "lerna run --scope @streamed-federation/* build",
+    "serve": "lerna run --scope @streamed-federation/* --parallel serve"
+  }
+}

streamed-federation/website1/.babelrc

@@ -0,0 +1,41 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", {
+      "targets": {
+        "browsers": ["last 4 versions", "not ie <= 9"]
+      },
+      "modules": false
+    }],
+  ],
+  "env": {
+    "development": {
+      "presets": [
+        "@babel/preset-react",
+        ["@babel/preset-env", {
+          "targets": {
+            "node": "current"
+          }
+        }]
+      ]
+    },
+    "test": {
+      "presets": [
+        "@babel/preset-react",
+        ["@babel/preset-env", {
+          "targets": {
+            "node": "current"
+          }
+        }]
+      ],
+    }
+  },
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-syntax-import-meta",
+    ["@babel/plugin-proposal-class-properties", { "loose": false }],
+    "@babel/plugin-proposal-json-strings",
+    "@loadable/babel-plugin"
+  ]
+}

streamed-federation/website1/.env.development

@@ -0,0 +1,2 @@
+PORT=3000
+NODE_ENV=development

streamed-federation/website1/.env.production

@@ -0,0 +1,2 @@
+PORT=3001
+NODE_ENV=production

streamed-federation/website1/.eslintrc.js

@@ -0,0 +1,155 @@
+module.exports = {
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaFeatures: {
+      generators: true,
+      experimentalObjectRestSpread: true,
+    },
+    sourceType: "module",
+    allowImportExportEverywhere: false,
+  },
+  extends: ["airbnb"],
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".json"],
+      },
+    },
+  },
+  globals: {
+    window: true,
+    document: true,
+    __dirname: true,
+    __DEV__: true,
+    API_URL: true,
+    CONFIG: true,
+    process: true,
+    jest: true,
+    describe: true,
+    test: true,
+    it: true,
+    expect: true,
+    beforeEach: true,
+    fetch: true,
+    alert: true,
+  },
+  rules: {
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        js: "never",
+        jsx: "never",
+        styl: "never",
+        css: "never",
+      },
+    ],
+    "no-console": ["error", { allow: ["warn", "error", "info"] }],
+    "no-shadow": 0,
+    "no-use-before-define": 0,
+    "no-param-reassign": 0,
+    "react/prop-types": 0,
+    "react/no-render-return-value": 0,
+    "no-confusing-arrow": 0,
+    "no-underscore-dangle": 0,
+    "no-plusplus": 0,
+    camelcase: 1,
+    "prefer-template": 1,
+    "react/no-array-index-key": 1,
+    "global-require": 0,
+    "no-bitwise": 0,
+    "react/jsx-indent": 1,
+    "dot-notation": 1,
+    "import/no-named-default": 1,
+    "no-unused-vars": 1,
+    "consistent-return": 1,
+    "import/prefer-default-export": 1,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "no-case-declarations": 1,
+    semi: [2, "never"],
+    "jsx-quotes": [2, "prefer-single"],
+    "react/jsx-filename-extension": [2, { extensions: [".jsx", ".js"] }],
+    "react/destructuring-assignment": 0,
+    "react/no-danger": 0,
+    "spaced-comment": [2, "always", { markers: ["?"] }],
+    "arrow-parens": [2, "as-needed", { requireForBlockBody: false }],
+    "brace-style": [2, "stroustrup"],
+    "import/no-unresolved": [
+      2,
+      {
+        commonjs: true,
+        caseSensitive: true,
+      },
+    ],
+    "no-unused-expressions": [
+      2,
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+      },
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+        optionalDependencies: true,
+        peerDependencies: true,
+      },
+    ],
+    "comma-dangle": [
+      2,
+      {
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "always-multiline",
+        exports: "always-multiline",
+        functions: "always-multiline",
+      },
+    ],
+    "max-len": [
+      "error",
+      {
+        code: 200,
+        tabWidth: 2,
+        ignoreUrls: true,
+        ignoreComments: true,
+        ignoreRegExpLiterals: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+      },
+    ],
+    "react/sort-comp": [
+      2,
+      {
+        order: [
+          "propTypes",
+          "props",
+          "state",
+          "defaultProps",
+          "contextTypes",
+          "childContextTypes",
+          "getChildContext",
+          "static-methods",
+          "lifecycle",
+          "everything-else",
+          "render",
+        ],
+      },
+    ],
+    "linebreak-style": 0,
+    "react/forbid-prop-types": [
+      "warning",
+      {
+        forbid: ["any", "array", "object"],
+        checkContextTypes: true,
+        checkChildContextTypes: true,
+      },
+    ],
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/iframe-has-title": 0,
+    "jsx-a11y/accessible-emoji": 0,
+  },
+};

streamed-federation/website1/.nvmrc

@@ -0,0 +1,2 @@
+9.10.0
+

streamed-federation/website1/build/config.js

@@ -0,0 +1,24 @@
+const path = require("path");
+const fs = require("fs");
+const dotenv = require("dotenv");
+
+const dotenvFile = path.resolve(__dirname, "../.env");
+if (fs.existsSync(dotenvFile)) {
+  dotenv.config({
+    path: dotenvFile,
+  });
+}
+
+module.exports = {
+  dotenv: path.resolve(__dirname, "../.env"),
+  development: {
+    clientPath: path.resolve(__dirname, "../buildClient"),
+    serverPath: path.resolve(__dirname, "../buildServer"),
+    publicPath: "/static/",
+  },
+  production: {
+    clientPath: path.resolve(__dirname, "../buildClient"),
+    serverPath: path.resolve(__dirname, "../buildServer"),
+    publicPath: "/static/",
+  },
+};

streamed-federation/website1/build/env.js

@@ -0,0 +1,52 @@
+const fs = require("fs");
+const path = require("path");
+const dotenv = require("dotenv");
+const paths = require("./config");
+
+delete require.cache[require.resolve("./config")];
+
+if (!process.env.NODE_ENV) {
+  throw new Error(
+    "The process.env.NODE_ENV environment variable is required but was not specified."
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${process.env.NODE_ENV}.local`,
+  `${paths.dotenv}.${process.env.NODE_ENV}`,
+  process.env.NODE_ENV !== "test" && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+dotenvFiles.forEach((dotenvFile) => {
+  if (fs.existsSync(dotenvFile)) {
+    dotenv.config({
+      path: dotenvFile,
+    });
+  }
+});
+
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
+  .split(path.delimiter)
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+module.exports = () => {
+  const raw = {
+    PORT: process.env.PORT || 3001,
+    NODE_ENV: process.env.NODE_ENV || "development",
+  };
+
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    "process.env": Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+};

streamed-federation/website1/build/webpack.config.js/client.base.js

@@ -0,0 +1,30 @@
+const path = require("path");
+const merge = require("webpack-merge");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const { client: clientLoaders } = require("./loaders");
+const plugins = require("./plugins");
+const common = require("./common.base");
+
+module.exports = merge.smart(common, {
+  name: "client",
+  target: "web",
+  entry: ["@babel/polyfill", path.resolve(__dirname, "../../src/index.js")],
+  output: {
+    publicPath: "http://localhost:3001/static/",
+  },
+  module: {
+    rules: clientLoaders,
+  },
+  plugins: [
+    ...plugins.client,
+    new ModuleFederationPlugin({
+      name: "website1",
+      library: { type: "var", name: "website1" },
+      filename: "container.js",
+      remotes: {
+        website2: "website2",
+      },
+      shared: ["react", "react-dom"],
+    }),
+  ],
+});

streamed-federation/website1/build/webpack.config.js/client.dev.js

@@ -0,0 +1,18 @@
+const webpack = require("webpack");
+const WriteFileWebpackPlugin = require("write-file-webpack-plugin");
+const merge = require("webpack-merge");
+const baseConfig = require("./client.base");
+
+const config = merge.smart(baseConfig, {
+  entry: [
+    "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=false&noInfo=false",
+  ],
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+  mode: "development",
+  devtool: "source-map",
+  performance: {
+    hints: false,
+  },
+});
+
+module.exports = config;

streamed-federation/website1/build/webpack.config.js/client.prod.js

@@ -0,0 +1,17 @@
+const merge = require("webpack-merge");
+const path = require("path");
+const baseConfig = require("./client.base");
+const env = require("../env")();
+const config = require("../config");
+
+const { publicPath, clientPath } = config[env.raw.NODE_ENV || "production"];
+
+module.exports = merge.smart(baseConfig, {
+  mode: "production",
+  devtool: "source-map",
+  output: {
+    path: path.join(clientPath, publicPath),
+    filename: "[name].[chunkhash].js",
+    chunkFilename: "[name].[chunkhash].js",
+  },
+});

streamed-federation/website1/build/webpack.config.js/common.base.js

@@ -0,0 +1,19 @@
+const plugins = require("./plugins");
+const resolvers = require("./resolvers");
+const config = require("../config");
+const env = require("../env")();
+
+const { publicPath, clientPath } = config[env.raw.NODE_ENV || "development"];
+
+module.exports = {
+  target: "web",
+  output: {
+    path: clientPath,
+    filename: "[name].js",
+    publicPath,
+    chunkFilename: "[name].chunk.js",
+  },
+  resolve: { ...resolvers },
+
+  plugins: plugins.shared,
+};