[Micro frontends] NX + Angular Module Federation + React MFE using ChatGPT

Let's have a quick discussion about the things we've built so far and what's new as part of the micro frontends series.

Table of contents

1. Recap
2. What's new
3. Challenges
4. Conclusion

Recap

We started from the Angular Tour of Heroes and migrated the monolithic architecture to micro frontends, by creating a host and remote applications as part of the same NX workspace. In terms of applications:

• the shell application is based on Angular framework
• 2 remote applications use Angular
• 1 remote application uses Vue.js

What's new

So far so good, but I also wanted to plug in a React remote application and see how it behaves in terms of integration. Well, instead of going through a step-by-step tutorial, let's see the challenges I faced during the development.
From the code perspective, the entire configuration, app development and deployments can be found here:
https://github.com/blminami/tour-of-heroes-microfrontends.

Considering it's a POC, the react application consists of a single page, where we display the React logo and a message. I'm going to use this app to actual code something in React, but for the purpose of today's article, it's enough.

Check out the react configuration here: https://github.com/blminami/tour-of-heroes-microfrontends/tree/master/apps/calendar-microapp

Tour of Heroes App: https://master--tour-of-heroes-mfe.netlify.app/

The questions I wanted to answer this week:

• How easy is it to create a react application and integrate it as part of the mfe architecture?
• Would ChatGPT help me with this project, considering I have minimal experience with React + Webpack 5 and Module Federation?
• How far can I get without using Stack Overflow or official documentations myself (using only ChatGPT and my own knowledge)?

Challenges

🔸 How easy is it to create a react application and integrate it as part of the mfe architecture?

Overall, pretty easy, considering that:

• NX supports React without custom configuration, there is a plugin for generating react applications as part of an NX workspace
• I already have experience configuring a Vue.js app as a web-component, and React is no different
• the configuration of the shell application allows the usage of remote modules, no matter the framework / library it's based upon

🔸 What about ChatGPT as part of this experiment?

Considering I already had a direction, I was curious if ChatGPT would make it even easier for me to do the configuration.

✨ Short answer: it was not straight-forward and I had to input multiple prompts (which implied some knowledge about the process on my side), but I was able to integrate it from scratch, without using any external resources myself. Which is great, right?

Let's get into details, shall we?

ChatGPT would be helpful on its own to some extent, but it'd require some knowledge on the topic and architecture to actually make it work in this context:

• There are multiple approaches when it comes to micro frontends. So, prompts like integrate react micro frontend in nx workspace and angular shell app won't work. been there, done that - in this case, it instructs to create a react application, build and export it, create NX library that uses the application and import the library as part of the Angular shell application. Which is valid, but not at all consistent with the remote modules architecture in place. integrate react micro frontend in nx workspace and angular shell app with webpack module federation is more appropriate for this goal, cuz the steps provided are based on webpack and module federation.
• The prompt above generated the steps that one should follow to integrate a react application. Those contained bits of documentation (only relevant parts), code snippets and cli commands. Even though it seemed pretty straight-forward at first glance, some commands generated errors and I had to explicitly request webpack 5 version (some libraries were outdated).
• I continued with requesting a webpack config file that uses the module federation plugin. The one provided was useful, tho quite generic. Great start, but once I ran the app based on that webpack config file, I got errors (OF COURSE, I was expecting them 😈).
• Based on the errors I received, adjustments to use the right paths + additional configurations and rules for different file formats were required. I could have asked ChatGPT for them (considering I already knew what was missing), but I decided to speed-up the process and add them myself.🙂

Same thing, just faster. 😄
Which leads me to the next question.

🔸 How far can I get without using Stack Overflow or official documentations myself and using only ChatGPT and my own knowledge?

Simply said, I made it work solely on ChatGPT and my knowledge, but check my comments above. It was not easy peasy lemon squeezy, but not that hard either. ☯️

Conclusion

In the end, I declare myself satisfied with my experiment, I got what I wanted. My curiosity can take a break now, hehe ^_^.
Next time, I'm going to play a bit with the ChatGPT API.💥

What are your thoughts and which are your experiences with ChatGPT and coding?

Until next time, thank you for reading! 🐾