React Module Federation Library

This package pre-configures webpack to work with module federation with react.

Configuration

Changes on the configuration can be done through the package.json file, as well as indicate which components should be exposes or consume.

| Property | Default Value | type | Description | |:------------:|:-------------:|:------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | name | n/a | string | This value will be used as package name in the federation url. Example: for the name 'package-name' the url will be: packageName@http://localhost:1234/remoteEntry.js | | sourceFolder | ./src | string | | | main | index.ts | string | Entry file name. Webpack will look for it in the sourceFolder | | host | localhost | string | Host to use. This will set webpack devServer.host | | port | 9000 | int | Port to use. This will set webpack devServer.port | | exposes | [ ] | object | A list of components to expose for module federation. The format should be: { "./ComponentName": "/path/to/component" } | | remotes | [ ] | object | A list of federated modules to consume. The format should be: { "ComponentName": "exposeName@http://host/remoteEntry.js" } | | shared | [ ] | object | A list of shared components. The format should be: { "react": { "singleton": true, "eager": true } } The requiredVersion field will be retrieved from the dependency version | | allowedHosts | auto | array/string | Allows you to whitelist services that are allowed to access the dev server. See webpack documentation |

Example of a package.json

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "Test App",
  "main": "index.ts",
  "port": 9091,
  "scripts": {
    "start": "co-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Author",
  "license": "ISC",
  "homepage": "https://github.com/some-user/test-app#readme",
  "devDependencies": {
    "@types/jest": "^27.4.0",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "co-react-webpack-build": "^1.0.22",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "remotes": {
    "RemoteComponent": "remoteComponent@http://localhost:9091/remoteEntry.js"
  },
  "exposes": {
    "./TestComponent": "./components/TestComponent/index.tsx"
  },
  "shared": {
    "react": {
      "singleton": true,
      "eager": true
    },
    "react-dom": {
      "singleton": true,
      "eager": true
    }
  }
}