Use SystemJS to convert React App to Micro frontend

Setup project if you don't have a pre-existing app

Mother App Setup

1. Do create projects

   create-react-app my-org-mother
   create-react-app my-org-child1
   

2. Eject the configuration file

   cd my-org-mother
   npm run eject
   

3. Setup your index file located in public/index.html with SystemJS. This template uses the latest react. To make your project work with the existing repo always use the SystemJS module generated by https://www.jsdelivr.com/package/npm/@esm-bundle/react. Always have the same version of React and ReactDOM for all repos associated with this importmap.

4. prepare config/webpack.config.js to disable chunks

5. set libraryTarget as system inside output object in config/webpack.config.js.

6. Install systemJS plugin for webpack

   npm i -S systemjs-webpack-interop
   npm i
   

7. Wrap the return output object with systemjsInterop.modifyWebpackConfig({ ...webpackConfig }) and save config/webpack.config.js

8. Run the app

   npm start
   

9. Check the static/js/bundle.js in network it must begin with following:

10. Now use the external of React and ReactDOM for shared libraries and amend static/js/bundle.js with externals below bail property:

11. Restart with npm start.

Observe that your React and ReactDOM packages are rendered via importmap of SystemJS. This completes the setup of your mother app to start accepting external packages.

Child App Setup

1. Go to the child1 app or your existing segregated child app and eject the config:

   cd ..
   cd my-org-child1
   npm run eject
   

2. Repeat steps 4 to 7 above to build a SystemJS module out of your child1 app.

3. Now add the externals in src/webpack.config.js same as above.

4. Change the port of app by creating .env file and the following

   PORT=3001
   

5. Allow Cross Domain access on Webpack Dev Server by modifying config/webpackDevServer.config.js with the following:

6. Modify src/index.js in my-org-child1 to export your component.

7. Add the indication of child1 Micro Frontend App with src/App.js:

8. Start the app

   npm start
   

9. Your App now must run at port 3001. Notice that your app won't run as the SystemJS file is not present. That is fine. We will use the bundle in the mother app. Just make sure your static/js/bundle.js starts with the following:

Combine child1 app with your mother app

With the setup made above, you will be able to use the import statement.

1. Move inside the mother app:

   cd ..
   cd my-org-mother
   

2. Update your in src/index.js importmap with your micro frontend path:

3. Update the externals in config/webpack.config.js with you app:

4. Add a ignore rule in .eslintrc or package.json

5. Install loadable to do a render wih fallback

   npm install @loadable/component
   

6. Modify you mother app src/App.js to import and run you child1 app:

7. Run both development server with npm start

Your Micro Frontend setup is complete with SystemJS. If you would like to access the mother app components to your child1, export component in src/index.js, include your mother app in importmap inside mother app public/index.html and external for your child1.