I have site A written in React.
I want to render smaller React components into site A whenever a user navigates to a certain page within site A.
Each smaller React component lives within its own repository, as does site A.
How can I dynamically load these components into site A when site A is in production?
What kind of workflow can I set up for developing the smaller React components locally within site A?
I was thinking of using Web Components (https://medium.com/@rchaves/building-microfrontends-part-iii-public-path-problem-1ce823be24c9) but don't want to have the components already deployed somewhere and just load those components from the server. Preferably there would be a solution where I can set up something in my pipeline to point to the repositories where the smaller components exist and package those along with the site A code into one bundle whenever any component is built.
That also brings up the other problem of loading the same dependencies multiple times (like React, React DOM) due to different projects being packaged.
Other ideas are possibly using npm modules, iframes, etc.
If you want complete isolation between the main app and the smaller components, iframes are the way to go as they can ensure that each component can have its own React versions and dependencies.
If you need to share data / interaction between these components and the main app, then adding it as an npm dependency is one way to go. But this will require uniform framework versions across all components. Or you can try web-components.