craco-mf new history

.github/workflows/npm-publish.yml

@@ -0,0 +1,22 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test/**/plugin.js
+.idea/
+.vscode/

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 WonbaeLee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,88 @@
+# craco-mf
+
+Module federation support for CRA5 applications without ejecting and losing update support of react-scripts.
+Fork of [hasanayan/craco-module-federation](https://github.com/hasanayan/craco-module-federation), which appears to be unmaintained/abandoned.
+
+## Prerequisites
+- Webpack 5
+- CRA 5
+- CRACO 7
+- Node 16+
+
+## Note
+
+This is a fork of the original `craco-module-federation` plugin. Use at your own risk. PRs are welcome; support will be limited.
+
+
+![](https://img.shields.io/npm/v/craco-mf.svg?style=flat)
+![](https://img.shields.io/npm/dt/craco-mf.svg?style=flat)
+
+## Install
+
+```
+npm install craco-mf --save-dev
+```
+
+## Usage
+
+1. Add the plugin into your craco.config.js
+    ```js
+    const cracoModuleFederation = require('craco-mf');
+
+    module.exports = {
+        plugins: [{
+            plugin: cracoModuleFederation,
+            options: { useNamedChunkIds:true } // THIS LINE IS OPTIONAL
+          },
+        ]
+    }
+    ```
+
+2. create a file named `modulefederation.config.js` in the project root. You should export ModuleFederationPlugin constructor options as json from this module. For example;
+
+    ```js
+    const deps = require("./package.json").dependencies;
+
+    module.exports = {
+      name: "app1",
+      exposes: {
+        "./Button": "./src/Button",
+      },
+      remotes: {
+        app2: "app2@http://localhost:3002/remoteEntry.js",
+      },
+      filename: "remoteEntry.js",
+      shared: {
+        ...deps,
+        react: {
+          singleton: true,
+          requiredVersion: deps["react"],
+        },
+        "react-dom": {
+          singleton: true,
+          requiredVersion: deps["react-dom"],
+        },
+      },
+    };
+
+    ```
+
+3. Update the scripts section of your package.json as follows:
+
+    ```json
+      ...
+      "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "craco:build": "craco build",
+        "craco:start": "craco start",
+        ...
+    ```
+
+## Testing the plugin locally
+
+There are two test apps in this repository inside test folder (app1 and app2). Install their dependencies on them using yarn (`yarn install`) and hit `yarn start` on both of them. When you navigate to app1 it should render the exported button from app2 that says `hello from app2`
+
+## License
+
+Licensed under the MIT License, Copyright ©️ 2021 Hasan Ayan. See [LICENSE.md](LICENSE) for more information.

index.js

@@ -0,0 +1,66 @@
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const paths = require("react-scripts/config/paths");
+
+const getModuleFederationConfigPath = (additionalPaths = []) => {
+  const path = require("node:path");
+  const fs = require("node:fs");
+  const appDirectory = fs.realpathSync(process.cwd());
+  const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+
+  const moduleFederationConfigFiles = [
+    "modulefederation.config.js",
+    ...additionalPaths,
+  ];
+  return moduleFederationConfigFiles
+    .map(resolveApp)
+    .filter(fs.existsSync)
+    .shift();
+};
+
+module.exports = {
+  overrideWebpackConfig: ({ webpackConfig, pluginOptions }) => {
+    const moduleFederationConfigPath = getModuleFederationConfigPath();
+
+    if (moduleFederationConfigPath) {
+      webpackConfig.output.publicPath = "auto";
+
+      if (pluginOptions?.useNamedChunkIds) {
+        webpackConfig.optimization.chunkIds = "named";
+      }
+
+      const htmlWebpackPlugin = webpackConfig.plugins.find(
+        (plugin) => plugin.constructor.name === "HtmlWebpackPlugin"
+      );
+
+      htmlWebpackPlugin.userOptions = {
+        ...htmlWebpackPlugin.userOptions,
+        publicPath: paths.publicUrlOrPath,
+        excludeChunks: [require(moduleFederationConfigPath).name],
+      };
+
+      webpackConfig.plugins = [
+        ...webpackConfig.plugins,
+        new ModuleFederationPlugin(require(moduleFederationConfigPath)),
+      ];
+
+      // webpackConfig.module = {
+      //   ...webpackConfig.module,
+      //   generator: {
+      //     "asset/resource": {
+      //       publicPath: paths.publicUrlOrPath,
+      //     },
+      //   },
+      // };
+    }
+    return webpackConfig;
+  },
+  overrideDevServerConfig: ({ devServerConfig }) => {
+    devServerConfig.headers = {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "*",
+      "Access-Control-Allow-Headers": "*",
+    };
+
+    return devServerConfig;
+  },
+};