ogzhanolguncu/react-typescript-module-federation

Micro Frontend with React, ReactRouter V6, Typescript and Webpack

Webpack 5 Module Federation with React/Typescript

This project consist of three pieces, a host app container and two remotes app1 app2.

Workflow:

• app1 expose CounterAppOne component.
• app2 expose CounterAppTwo header component.
• container import CounterAppOne and CounterAppTwo component.

Running Demo

In order to run the demo I highly recommend installing lerna globally via

npm i -g lerna

Then,

lerna bootstrap

Run the command above at the root of your project. This command will make sure you have dependencies you need in order to run this project.

Finally,

npm run start

Lerna will start all your projects parallelly and open your browser.

• http://localhost:3000/ (container)
• http://localhost:3001/ (app1)
• http://localhost:3002/ (app2)

Screenshots

Tech Stack

React, Typescript, Chakra UI, Webpack, Lerna, React Router V6

Article

If you are curious about building this template head over to Introduction to Micro Frontends with Module Federation, React and Typescript

Feedback

If you have any feedback, please reach out to me or feel free to open up a issue.

react-typescript-module-federation's Issues

save in `App.tsx` component is not triggering web browser page reload

Hello, I'm trying to get module federation going by using your starter project, but I'm having issues because of changes not reflecting in web page. Can you please help?

Issue description:

Web page is not reloading with changes after making modifications in app1/src/App.tsx component.

• before

const App = () => (
  <Box margin="1.2rem">
    <Box>APP-1</Box>

    <Box>
      <CounterAppOne />
    </Box>
  </Box>
);

export default App;

• after

const App = () => (
  <Box margin="1.2rem">
    <Box>APP-1 this change is not showing in browser after saving</Box>
    <Box>
      <CounterAppOne />
    </Box>
  </Box>
);

export default App;

• http://localhost:3001/ is not reloading. see screenshot
  

• console logs:

VM2379 log.js:26 [HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:3001/main.c48a05b….hot-update.js)
    at http://localhost:3001/main.js:1265:26
    at new Promise (<anonymous>)
    at loadUpdateChunk (http://localhost:3001/main.js:1260:20)
    at http://localhost:3001/main.js:1720:29
    at Array.forEach (<anonymous>)
    at Object.__webpack_require__.hmrC.jsonp (http://localhost:3001/main.js:1715:22)
    at http://localhost:3001/main.js:862:47
    at Array.reduce (<anonymous>)
    at http://localhost:3001/main.js:858:55
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/App.tsx
log.js:24 [HMR] App is up to date.

Steps to reproduce:

1. Clone project
2. run lerna bootstrap
3. run npm run start
4. edit app1\src\App.tsx
5. save app1\src\App.tsx
6. http://localhost:3001/ not reloading to reflect changes
7. console has errors

PS: Same issue happens when running from container

webpack.prod.js missing

Hi There,

Let me thank you for making all these repos. It has been helping me to create MFE architecture using react with typescript. I'm able to create MFE with your repos and has progressed well.

Now, I have to deploy all MFEs to AWS cloud. I have been following your article and repos but somehow webpack.prod.js is missing. I need your help to provide the same. That would me a great help for people like me.

Thanks in advance. Expecting quick response from you.

PS: It would be helpful if you can write or point to an article for deployment to AWS.

Regards,
Nikhil

Communicating Props between apps and Container

Thanks for this wonderful repo. I want to know how could it be possible to send props between apps and container.

Lerna bootstrap command is deprecated

ERR! bootstrap The "bootstrap" command was removed by default in v7, and is no longer maintained.
ERR! bootstrap Learn more about this change at https://lerna.js.org/docs/legacy-package-management

Routing in apps

As I realize, it doesn't mentioned in this repo how routing can be implemented. Thanks

Readme feedback

I've read a lot of blog posts on module federation and I really like how you have have assembled a proof of concept that provides a foundation to build real world apps!

I'd like to provide a bit of feedback to make diving into your demo that much easier (than it already is) for devs missing a couple things.

1. npm install --g lerna if you don't already have it installed
2. yarn within each folder: app1, app2, and container to install the dependencies and then return to the root of the project
3. yarn build
4. yarn start

lerna will build & start app1, app2, and the container. Then, open your browser:

• http://localhost:3000/ (container)
• http://localhost:3001/ (app1)
• http://localhost:3002/ (app2)

Extra polish: you could also link to your amazing article and include a screenshot of the demo.

Again really appreciate your efforts here and it is certainly helping convinces my team mates that is the right way to do MF!