I am trying to render a UI component using in-browser utility module in single-spa, which I have created using create-single-spa command and selected in-browser module option. As there is no "single-spa-react" library comes with in-browser utility module which helps to render elements to dom, how can we achieve rendering an UI elements like paragraph,anchor,div tags etc.In the documentation it was mentioned that the in-browser utility modules may or may not render ui elements. Link for the documentation is https://single-spa.js.org/docs/module-types . Any inputs on how to achieve this is appreciated.
Thanks in advance!!
At a technical level, utility modules aren't all that different from applications. The difference is that an application exports single-spa lifecycles, and a utility module typically doesn't. However, this doesn't mean that a utility module can't use a framework like React. This is a very useful pattern for some microservices, like a "notification service" module that all other microfrontends use and that (might) get shown to the user. single-spa-react wouldn't be necessary for this module as that helper just generates the lifecycle functions needed for applications. Whatever is exported from the entry file of this module is its public API. Your options at this point are:
react, react-dom, and related libraries (for example, webpack-config-single-spa-react) to the utility moduleAfter which you would use the normal ReactDOM.render to mount a container which will be used to render whatever UI that that microservice is responsible for. I would use an existing DOM element that is defined in the root-config layout (ie. ReactDOM.render(App, document.getElementById('notification-root'))) but there are more than one ways to approach this such as using React Portals, or even not using React! It'd be equally simple to implement with vanilla JavaScript; Any web framework just provides familiarity and easier DOM manipulation, but that's about it.