Developing microfrontends | ClearBlade Intelligent Assets

What is a microfrontend (mfe)?

Single-spa allows us to connect independently running applications into our root IA app and display them as pieces of our app. They can be developed and deployed separately from our root app while being integrated and displayed.
A microfrontend reaches IA in one of two ways. Register it on its own, at the screen for the slot it fills. Or ship it inside a component. Both work, and the code you write is the same either way.

Developing your microfrontend

Please browse our existing microfrontends if one already meets your needs.

We recommend the following, because we have tested this approach and you can benefit from our shared utility functions, which are written in TypeScript:

Webpack
React TypeScript

Build the bundle as a SystemJS module, with libraryTarget: "system" in your webpack config. A bundle in any other format loads and never executes.

Shipping it on its own

Slot	Where you register it
Attribute view or edit widget	Settings > System > Plugins > Attribute widget plugins
Page	Settings > System > Nav pages
Asset tab	Asset Types > the asset type > Asset tab settings
Dashboard	The dashboard's edit modal > General settings

Each of those screens offers two sources:

Hosted URL — a URL that serves your built JavaScript entry file. Update the URL to release a new version.
Upload file — upload the built .js file. IA stores it and serves it, so the bundle needs no public host. Upload again to release a new version.

Shipping it in a component

Build for production.
Put the bundle under mfe/dist/ in your component folder.
Point the matching mfes[].bundle_path in component.json at it.
Build the release zip and register it.

See Developing Components for the manifest and the zip layout.

Two slots are component-only: the device configuration screens and settings sections. IA finds those by reading the installed components, so there is no screen to register one on its own. Every other slot takes either method.

A component bundles its own libraries. Never add one to the host import map. Every component on the system shares that map, so a version added to suit one component changes what every other component loads.

Development setup

You will be using a deployed instance of Intelligent Assets, and running your mfe locally.
Point the microfrontend at your local bundle. On its own, set its Hosted URL to your local mfe, for example http://localhost:8081/my-mfe-entry-point.js. Inside a component, set mfe_url on that microfrontend in component.json to the same, and IA loads from there instead of the bundle in the zip.
Now, as you update your MFE locally, you should be able to see your changes reflect in the UI.
When you are satisfied with your local code, point it back at the real bundle. On its own, upload the built file or set the hosted URL to the released version. Inside a component, remove mfe_url, build the bundle into the zip, and register a new component version.

Imports and utils

We have included a handful of packages in the import-map of our root app. They are available to be shared by your mfe without compiling them. You still need to install any of these packages you’d like to use to find their TypeScript types. Here are the versions you need to install to match the version within IA:

npm install react@^19.3.1;
npm install react-dom@^19.3.1;
npm install single-spa@^6.0.3;
npm install @tanstack/react-query@^5.104.5;
npm install @mui/material@^9.4.0;
npm install @emotion/react@^11.11.1;
npm install @emotion/styled@^11.11.0;
npm install @clearblade/ia-mfe-core@latest; // This contains our exposed utility functions and types
npm install @clearblade/ia-mfe-react@latest; // This contains our exposed utility functions and types that depend on react

If you use any of these packages, add them to your external configuration within your webpack.config to avoid compiling them. Single-spa automatically includes react, react-dom, and single-spa in your externals.

// within webpack.config.js

return merge(defaultConfig, {
    externals: [
      '@clearblade/ia-mfe-core',
      '@clearblade/ia-mfe-react',
      '@tanstack/react-query',
      '@mui/material',
      '@emotion/react',
      '@emotion/styled',
      'single-spa',
    ],
  });

react-router-dom, @material-ui/icons and @material-ui/lab are no longer shared. Bundle them with your microfrontend if you need them, and leave them out of externals.

Helpful tips for development

Here is a list of libraries we do not include in our import map but that may be useful in achieving certain features for your microfrontend