Module Federation in React | React Micro Frontend

hello everyone welcome to my other video today I'll be showing you how you can set up microphone and architecture using module Federation plugin provided by webpack so let's get into it before I start let's first discuss about monolithic front-end architecture in the screen you can see a monolithic architecture in the monolithic architecture the web browser communicates with the front-end monolith application which communicates with the backend API services that interact with the database here all the components are tightly coupled and interact directly with each other and any change to one part of the front end model the application can affect other parts of the application and scaling this kind of application can be little challenging here in this diagram you can see there is a front-end model with application which is interacting with three services service a service B and service C so here the single front end application is responsible to show or work with the data that are coming from these three services now in case of micro font and architecture the web browser communicates with the micro front-end shell which is responsible for loading and managing the various micro fontain applications here in this diagram notice that there are three front-end services with three colors each of them is interacting with a particular service of their needs so here a single owner is not responsible for any change in the front-end application unlike monolithic front-end application rather a particular micro-funded owner should be responsible for that now let's see what should be the steps if you are looking to build a macro front-end application here I have listed down some points the first one is identify different parts of the front-end application that can be divided into smaller independent parts so these steps involves breaking down your front-end application into smaller components that can function independently such as user in user authentication search functionality and anything else the second one is deciding on a common framework and language for developing micro fontent I would recommend you to choose a common framework and programming language so that it ensures consistency and effective collaboration between teams working on different macro fountains also it enables code sharing and streamline development the third one is Implement a shell application or orchestrator to load and manage microphone ends if you don't have any idea about Shelley application so it is something like it acts as a container for microfontance handling tasks like routing communication between components and rendering the appropriate interfaces based on any user interactions so I would recommend you to use or implement this if you are making any microphone and applications the fourth one is deciding a strategy to bundle and deploy micro fontins so these steps says like you you need to determine how to package and deploy micro fontins whether as a separate Deployable unit or as a combined bundle also you need to consider the the factors like application size or deployment requirements and scalability and the fifth and the final one is the implementing a testing strategy that ensures each microfundant can be tested both in isolation and as a part of the larger application so by having a comprehensive testing strategy you can verify the functionality and integration of each microfontent independently so this is also a big benefit of having micro front-end application so implementing all of this actually enable the adoption of micro fontained architecture facilitating modular development code reducability and improved scalability for your front-end application okay now let's jump into the implementation in a live project so here I will need two application that is one shell application shell front-end application and other one is the micro front end application so I'll create one directly using mpdir and the reacting name will be shell application and I will create another direct that is micro fontain one so here since I will create one react application for that reason I need to create or I have to initialize npm so I'm writing npm init to initialize the npm and after that I am just keep pressing enter to accept all of these sessions like entry point the package name and package version so here the package name is shell application same as the folder name so after that I will install some third party libraries that is react and react Dom so I like the npm I react space react Dom and then I will install some development time dependencies like bevel core webpack Dev server or Apex CLI webpack you can pause this video and type it by your own okay now after this installation I will go into vs code and create one directory that is public and inside this public actually I will create one index dot external file so this is the file where your react application will get rendered so here I will create one div and I will give the ID as loot so inside this root container the react components will be rendered so after that I will create One Source folder where I will keep all the react components and all the initial files so here uh I've created this associated and here first I will create index.js and here first I will import react from the library react so I'm writing import react from react and then I will import react Dom so for that I am writing react import react Dom from uh I'll import that from reactor client okay now I will create one variable that is the that is for root container so I'm writing const root equals to reactam dot create root and here you need to provide document dot get 11 by ID and you have to select that div that you have just declared in index dot HTML file okay now you have to render this root so for that just type root dot render and pass what you want to enter so at first I will create one app.js file that is my first react component that I will render so I will render this app component so I'm importing the app component and I'm passing to the render so inside the root container my app component will be rendered okay now I will need one webpack.config.js file where I will keep all the configuration of webpack and actually I have pasted all the configuration and you can take the configuration from my description section I will provide the link to the source code here you see that I have used module Federation plugin for this micro fonting and all these settings I will come to these settings later when I will work with other component other application actually uh all you need to know that here for the mode is development and I'm running at Port 3000 and also I'm using the bevel loader so since I'm using this bevel loader and to create one BaByliss file so I'll create that in bevel RC file you can simply configure all the bevel presets so here I will write some presets like Babel preset react and I will need some plugins also and here I will write Babel plugin that is proposal class properties that's all and finally I need to add one script to run my react application here I'm adding one script as start and I will learn web pack and I will pass the config flag and I will give the path name of my webpack configuration file that is webpack config.js now it will take the configuration from webpack.config.js file and it will start running at Port 3000. and coming back to this terminal I will write npm start to start my node server I can see one error I think I've made some mistakes okay actually it will be plugins [Music] once C is added here okay now I will check the terminal if it is running or not okay I have to destroy it and okay now it's running see the server is running at Port 3000 now if I go to the browser and hit localhost Port 3000 I can see that my app component is getting rendered successfully so the thing is so in this app component currently I am rendering this app text only the idea is I will render other component from micro fontain application so for that I will have to create that micro front end application so here I have allocated the directory now I will enter into that directory writing CD space magnet Fontaine one and then again I will initialize npm so I'm writing npm init and I will keep pressing enter to accept all of this session and it will actually create one package.json for me and here you can see for this microphone and one application one package that Json has been created now I will simply copy all this uh dependencies and Dev dependencies into microphone and ones package.json so that I don't need to write all of these differences by my own and here I will just write in-frame install to install all the dependencies okay now from the sale application I'll also copy the soil pack configuration and make some changes based on the microphone end one configuration so I'll create one file webpack.config.js and paste it here now see uh for this uh microphone and I will also use this module Federation plugin to make use of micro fontain so I'll come back later to this configurations so for now what I will do I will simply change the port of this development server so that I can check if this react application is running or not for now I will create one public directory and there I will create one index.html file same same way that I have created for the shell application and then I will create one root container and within that root container I will render all the react application or react components now in SSC directory I will need one index.js file and other one is app.js file and for index.js file I will simply copy it from sale application index.js file uh the full code will be the same as the shell application for this index.js file so I'll just keep that and for this app component I have to create that so the file is already there I have to Simply write RFC to use the snippet of vs code extension and here I will simply write micro fontain 1 now I will create that Babel RC and I will go to this shell application be available RC and copy it and paste it here okay now uh all I need to do is I to uh add a script in package.json so I've copied this script form shell application package.json and paste it here now I will start the server using npn start let's see if it is working now see at localhost Port 3001 uh I can I can see this microphone and one is painted okay now what I will do I will create one component in my microfontain application and I will use that component in Shell application so in SSC directory I am creating one file that is button.js so this is nothing but a button component so here I am changing the div to button and here the button name will be a variable that will come through the props so I'm declaring the prop name as button name so whenever I will use the button I have to pass the prop now coming to this webpack config file for micro Fontaine one application you can see that I have used module Federation plugin so here the name is declared as host so I will change it to micro front end because this is one microphone in application and also I will use this application to use some confidence from it now the file name will be remote entry.js the same file name and for this remotes I don't need that because this is uh not the share application for Shell application I will need this remotes now I will need these exposes property or to expose my components that I want to expose to other microphone and applications or other shell applications so here I will expose the button component so I'm writing that also I'm giving the path so the button company size in SSC directory so I have mentioned that now coming to this sale applications webpack config file here in module Federation plugin I need to make some changes at first the name should be shell application because this is shell application and for file name it will be same as remote entry.js no issue with that and for this remotes okay so here I have to give the name of my micro fontent application name so there I have gave the name as micro fontain and also that microphone is running at local sport 3001 I've just declared it so I'm giving the localhost port as 2001. okay now in this app.js file under this shell application I will use that button component that is coming from that micro front-end application okay so the for that I have to first import that button in this component so I'm writing const button equals to react dot lazy because I will lazy load this component and I will write import and then I have to keep the path to that component so here I am I will fetch the component from the micro fondant application and remember in module Federation plugin I have given the name as macro fontent so for that reason I am writing micro font in here and after microphone 10 the component name is there so in this case the component name is button now here I will make use of this button component and I'm just writing shell application under this div now I will write button and I need to pass that property that I have defined in the micro fontain application the property name is and whatever I will pass from the sale application as the property that will go to the micro front end component and it will be used there and see here I have used this click here as better name now I will go to this Mac Shell application terminal and I will I think I have to close the server because I'm getting some errors so I'll close the server and run it again so I'll run npm start so the server is running now let me check what the browser says okay so in the browser also I'm getting some errors I think I need to restart the server of the micro front end because actually I made some changes in webpack config file so it has not loaded yet that configuration so I'll restart the macro font in server and see this is actually working so here this button actually coming from the micro fontained application and I'm using it inside this cell application so the flow is I am exposing a button component from microphone in one application and using remote entity.js I am getting access to that in my shell application where I will use that button component and in Shell component all you need to do is import and use that exposed component independently so that's all for today I hope you found this video helpful please like And subscribe if you would like it thank you

Channel: AVDojo

Views: 8,453

Keywords:

Id: -LMQKc4bVSk

Length: 21min 3sec (1263 seconds)

Published: Wed Jul 05 2023