module-federation-cra
v0.1.1
Published
Add module federation support to your CRA application without ejecting
Downloads
648
Maintainers
Readme
module-federation-cra
Add module-federation support for your CRA project without ejecting and losing update support of react-scripts. Requires latest version of CRA with Webpack 5
Credits
A clone of craco-module-federation.
Install
npm install module-federation-cra --save-dev
Usage
- Add the plugin into your craco.config.js;
const cracoModuleFederation = require('module-federation-cra');
module.exports = {
plugins: [{
plugin: cracoModuleFederation,
options: { useNamedChunkIds:true } //THIS LINE IS OPTIONAL
},
]
}
- create a file named
modulefederation.config.js
in the project root. You should export ModuleFederationPlugin constructor options as json from this module. For example;
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"],
},
},
};
- Update the scripts section of your package.json as follows:
...
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "craco start",
+ "build": "craco build",
...
Testing the plugin locally
There are two sample apps in this repository inside sample 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. See LICENSE.md for more information.