Select to view content in your preferred language

How to architect a micro-frontends project under ArcGIS JS API?

439
2
04-12-2023 01:33 AM
DaoYu
by
New Contributor

Hello, I'm trying to architect a microfrontend project under ArcGIS JSAPI.

However, I've encountered a critical issue where different remote applications using the ArcGIS JS API result in an error,such as „Logger.js:5 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference“

I've read similar issues such as "https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/problem-using-es-modules-in-webpa...", but there doesn't seem to be an out-of-the-box solution provided. I was wondering if there were any progress or shared knowledge from the internal team regarding microfrontends?

---

I can probably guess the reason for this error. I instantiated the Access class of the API in different micro-frontends that are not aware of each other, which has to do with the prototype chain. However, I'm not sure how to handle this issue.

0 Kudos
2 Replies
ReneRubalcava
Frequent Contributor II

This is going to depend on how you are using the SDK. You can't mix builds different builds.

Are these different components? Like you have some pieces for displaying legend, layerlist on one port, something to handle the map on another port? One solution is to have your components take ArcGIS Modules as inputs, so your "main" application supplies the ArcGIS SDK modules and your components instantiate them. That would help to solve this issue. There is not really a clean story here.

0 Kudos
DaoYu
by
New Contributor

Thank you very much for your reply. I am using the SDK with ESM. Following your advice, I modified my code structure like this:

mfe-arcgis-api
├── package.json
├── readme.md
├── api (arcgis js api)
│   ├── src
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
├── host
│   ├── src
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
└── remote 
    ├── src
    ├── package.json
    ├── webpack.config.js
    └── ...

My host's webpack5 config:

new ModuleFederationPlugin({
      name: "host",
      filename: "remoteEntry.js",
      remotes: {
        api: "api@http://localhost:8000/remoteEntry.js",
        remote: "remote@http://localhost:3000/remoteEntry.js",
      },
      //  ...
}

usage:

import ArcGISMap from "api/Map"; // which from my api application
import MapView from "api/views/MapView";

Both the host and remote get the SDK from the "api", ensuring that Accessor is the same class. Now this simple demo is sufficient for my needs. However, I still hope that the official documentation can provide more elegant examples, similar to those in [Esri/jsapi-resources](https://github.com/Esri/jsapi-resources). Thank you again for your response, which has pointed me in the right direction.

0 Kudos