❤️ to auto badger for making badging simple
The following is a react component that serves as the UI for the map plugin from the nwms-plugins for the tethysDash application.
The following npm package exports a remote entry point using the ModuleFederationPlugin feature on webpack. This can be use as an example for an npm package that accompanies a python plugin for the tethysdash app
The following is the structure of this project:
├── package.json
├── package-lock.json
├── public
│ ├── index.html
│ └── robots.txt
├── README.md
├── src
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ └── index.js
├── structure.txt
└── webpack.config.js
3 directories, 11 files
The following is added to the webpack.config.js file:
....
new ModuleFederationPlugin({
name: 'mfe_ol',
filename: 'remoteEntry.js',
exposes: {
'./MapComponent': './src/App', // Adjusted path to exposed module
},
shared: {
'react': {
singleton: true,
requiredVersion: '^18.3.1',
eager: true,
},
'react-dom': {
singleton: true,
requiredVersion: '^18.3.1',
eager: true,
},
},
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
....Similarly, please note that the filename can be any name. It refers to the name of the entrypoint file.
Please note that the exposes section will be the component that you will like to expose through the entrypoint. The expose section exposes the MapComponent that is imported in the App.js file.
Finally, you need to edit the package.json to expose the entrypoint as well
"exports": {
".": "./dist/bundle.js",
"./remoteEntry": "./dist/remoteEntry.js"
},the "." is the main bundle, while the "./remoteEntry" refers to the entrypoint that will be used by the Tethysdash app.
When the package is ready to use, you need to build it and publish it.
$ npm run build
$ npm publishOnce published you can access the remoteEntry.js file on your TethysDash intake driver plugin in the following way:
def __init__(self, base_map_layer, zoom, services, huc_id, metadata=None):
# self.mfe_unpkg_url = "http://localhost:3000/remoteEntry.js" # if you are developing
self.mfe_unpkg_url = "https://unpkg.com/mfe-ol@latest/dist/remoteEntry.js"
self.mfe_scope = "mfe_ol"
self.mfe_module = "./Map"
self.zoom = zoom
self.huc_id = huc_id
parts = services.split("/")
self.service = parts[-3]
self.layer_id = int(parts[-1])
self.BASE_URL = "/".join(parts[:-3])
self.base_map_layer = self.get_esri_base_layer_dict(base_map_layer)
self.service_layer = self.get_service_layer_dict()
self.center = self.get_center()
self.view = self.get_view_config(center=self.center, zoom=self.zoom)
self.map_config = self.get_map_config()
self.legend = self.make_legend()
self.HUC_LAYER = self.get_wbd_layer()
super(MapVisualization, self).__init__(metadata=metadata)
def read(self):
logger.info("Reading map data configuration")
layers = [self.base_map_layer, self.HUC_LAYER, self.service_layer]
return {
"url": self.mfe_unpkg_url,
"scope": self.mfe_scope,
"module": self.mfe_module,
"props": {
"layers": layers,
"viewConfig": self.view,
"mapConfig": self.map_config,
"legend": self.legend,
},
}Webpack not loading the shared module on the ModuleFederation plugin
_Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react_