Discover the basics of micro-frontend development in our new blog. We’ll guide you through creating lively apps with React, explaining the perks, structure, and smart practices for micro-frontends. It’s like solving a web puzzle — simple, effective, and fun. Let’s get started!
In this blog, we will cover:
- What are Micro-frontends?
- Micro-Frontend Architecture
- Advantages of Using a Micro-frontend
- Best Practices for Micro-frontends
- Hands-on
- Conclusion
What are Micro-frontends?
In today’s web development, there’s a common approach where we create a big front-end application that sits on a foundation of small, separate services in the back-end.
But as more developers from different groups work on this big front-end, it becomes harder to manage. This is where microservices come in.
Now, think of “micro-frontends” as the same idea but for the front-end part of a web app. Just like microservices break down the back-end into small, independent pieces, micro-frontends do the same for the front-end.
The goal is to treat a web app like a puzzle made up of different parts, each handled by different teams. These teams work on everything from the data to the user interface.
There’s no strict structure or fixed boundaries with micro-frontends. Your project will likely change over time, and you might need to adjust your micro-frontend as you go along.
Micro-Frontend Architecture
Advantages of Using a Micro-frontend
In simple terms, micro-frontends help make big web applications easier to maintain. If you’ve ever worked on a large application, you know it can be a hassle to handle everything. Micro-frontends use a “divide and conquer” approach to simplify this process. Now, let’s explore the key advantages of using micro-frontends.
- Faster Development: Your team has the freedom to create and put out the frontend at any time. Each part of the project doesn’t rely on other parts, so you can release updates swiftly. The primary aim of using micro-frontends is to speed up the development cycle.
- Deployment and Security: The micro-frontend architecture lets you split a website into separate parts that can be updated separately. Vercel can handle this, even if each part uses a different language or framework. You can also use Netlify for this. Once your micro-frontend is live, you can use it just like a regular website. To keep your micro-frontend safe, you can use an SSL certificate, like a Wildcard, single-domain, or multi-domain SSL certificate. These certificates can protect multiple sites and subdomains.
- Code Reusability: Micro-frontends help teams reuse code because one team can create a component that many teams can use.
- Easier learning curve: Each team works on a separate part of the app, making it easier for new developers to learn. This means that it’s not too hard for them to get started, and they can contribute more to the project.
- Vertical domain ownership: Before micro-frontends came along, companies could divide their backend into smaller parts using microservices, allowing different teams to take charge of specific areas. However, when it came to the frontend, everything was bundled together.
Now, with micro-frontends, the frontend is also divided into sections, and each team gets to own a part of it, from the data to the user interface. This means teams can have more control over both the backend and the frontend of their product.
- Easy Testing: Before diving into integration testing, it’s a good idea to check each part of the application separately. Teams should assess the micro-frontend before examining the whole system to reduce the likelihood of errors in the final product.
Additionally, this approach offers benefits such as having a small, easy-to-manage codebase and the flexibility to swiftly include or remove modules from the system.
- Technology Agnosticism and Scalability: With a micro-frontend setup, you can mix different languages and tools, such as React, Vue, or Angular, in one project. Each team working on the frontend can pick their own technology and make updates without needing to coordinate with the other teams.
Best Practices for Micro-frontends
Let’s go over some best practices to do things when setting up a micro-frontend architecture.
- Separate the team’s code: Every team needs to create their own features as separate apps, without using shared data or relying on global information. As a result, there should be no sharing of resources, even if all teams are using the same framework.
- Create a strong and reliable web application: Every separate team should create features that keep working even when JavaScript is off or has problems. Also, make sure to boost performance by using universal rendering and gradual improvement techniques.
- Use built-in browser API over custom APIs: It’s better to use browser events for communication rather than creating a complex global pub/sub system. Keep things straightforward when designing APIs that need to work across different teams.
- Set up team beginnings: When isolation isn’t an option yet, teams should decide who’s responsible for specific namespaces like CSS, events, local storage, etc., to prevent potential conflicts.
Hands-on
In this hands-on, we’re going to explore how to build a micro-frontend application using React.
First, we’ll start by setting up a new React application. Inside this application, we’ll build various components to later share them as micro-frontends.
Next, we’ll create a second React application. Within this second app, we’ll write some code inside the App component to distinguish it from the first app.
Now, here comes the exciting part: instead of redoing all the work from the first app, we’ll make the components we built in the initial application available to the second one by updating the webpack.config.js files in both the applications.
This way, we can use them as micro-frontends within our second application, saving us time and effort.
Throughout this whole process, we’ll continuously test our code to make sure everything works as expected.
By following these steps, you’ll not only learn how to work with micro-frontends in your React projects but also gain the skills to apply this technique to your own unique scenarios.
Create a new directory on your local machine.
Open VS Code and click on open, to open the directory you just created.
After opening the newly created directory, you will see a welcome screen like this.
Open command prompt and run the command “npx create-mf-app”.
After running the command, you will be required to pass the following data to the interactive terminal:
Name: primary
Project type: Application
Port number: 3000
Framework: react
Language: javascript
CSS: CSS
After executing the command and passing the required data, you will see the screen as shown in the image below.
As shown in the above image, the next step is to change the active directory using the command shown in the image below.
Next, to test the app from the primary folder, run “npm install” to install all the necessary dependencies.
On successful installation you will see the screen as shown in the image below.
Next, use the command “npm start” to initiate the development server. If everything went well, you’ll see the following logs on your terminal:
Also, you will be able to see the following message in your browser window.
After setting up the first application, we need to set up the second app.
For that, Open a new terminal by clicking on the “+” icon in the top right corner of the terminal.
Run the command “npx create-mf-app” to create another application.
After running the command, pass the following data to the interactive terminal:
Name: secondary
Project type: Application
Port number: 3001
Framework: react
Language: javascript
CSS: CSS
After executing the command and passing the required data, you will see the screen as shown in the image below.
Run the command shown in the image below to change the active directory to “secondary”.
Finally, to test the app, install the required dependencies by running the “npm install” command. Then, start the dev-server by running “npm start”. If everything was successful, you should see the following on your browser window:
Now that we have set up both the applications, it’s time to create components inside our primary application.
In our micro-frontend setup, the primary application holds and shares two parts: the Navbar and Footer. The secondary application brings in and uses these parts.
To do this, right click on the “src” folder inside the primary directory and click on “New File”.
Enter the name and save the file as “Navbar.jsx”.
Similarly, create another file and save it as “Footer.jsx”.
Before writing the code for these components first let’s include the Bootstrap in both of our applications by pasting the bootstrap CDN in the “index.html” files of both the apps as shown in the image below.
Write the code provided in the image below inside the “Navbar.jsx” file.
Similarly, write the code provided in the image below inside the “Footer.jsx” file.
Next, update the “App.jsx” component to use the following components:
Open your browser and you should be able to see the screen as shown in the image below.
Now, We need to create the secondary application’s page. To achieve this, make changes to the App.jsx component in the secondary app as shown in the image below:
Open your browser to test the changes. You should be able to see the screen shown in the image below.
Looking at the UI shown above, we can tell that we need navigation at the top and footer at the bottom of the page. However, we don’t have to make multiple copies because we can use micro-frontends to share them.
As mentioned earlier, the secondary application’s page should use the Navbar and Footer components from the primary application. To achieve this, we’ll need to set up a module federation.
We’ll start by making the Navbar and Footer components of the primary app micro-frontends so that other applications can use them.
Open the webpack.config.js file in the primary app, which was set up using the create-mf-app package. Then, make the following change to the exposes property in the ModuleFederationPlugin configuration, as shown in the image below:
In the code above, we mentioned that the main application makes the Navbar and Footer components available as micro-frontends. This means these components can be easily shared and used by another application.
Now, go ahead and restart the server. Even though you won’t notice any changes in the user interface, there’s a hidden remote entry file that has been generated for us in the background.
To take a look at this remote entry file, open your web browser and visit the URL localhost:3000/remoteEntry.js. You’ll find the following information there:
This remoteEntry.js file is like a list of all the modules that the primary application makes available to others.
To finish setting up, just copy the link to the manifest file, which is `localhost:3000/remoteEntry.js`. Afterward, go ahead and update the “remotes” section in the webpack.config.js file for the “secondary” app as shown in the image below:
The code mentioned above says that the secondary component connects to the micro-frontend application called primary. Because of this connection, we can use any of the components from the primary application in our secondary application.
Now, add the shared navigation bars to the App.jsx component in the secondary application, as shown below:
Restart the development server, and you should be able to see the following changes in your browser window:
Conclusion
In this hands-on, we’ve learned how to create a micro-frontend application using React. We started by setting up a new React app and building various components to later share them as micro-frontends.
Then, we made a second React app and added some code to make it different from the first one.
Instead of starting from scratch, we shared the components we made in the first app with the second one. We did this by updating the webpack.config.js files in both apps. This way we did not need to write the code again for those components.
Throughout this process, we tested our code to ensure it worked correctly. By following these steps, you’ve not only learned about micro-frontends in React but also gained the skills to use this approach in your own projects.
We will come up with more such use cases in our upcoming blogs.
Meanwhile…
If you are an aspiring React developer and want to explore more about the above topics, here are a few of our blogs for your reference:
- How to Manage State in a React Application Using Redux?
- Supercharge Your React App with Real-Time GraphQL Subscriptions & Apollo Client
- How to upload large files (1GB and beyond) to AWS S3 using NestJS (backend) and ReactJS (frontend)?
- How to build and deploy dApps using Solidity Smart contract, WEB3.JS & React.JS?
- How to Build a Hybrid App using React Native?
- Angular vs React: Which one to choose and when?
Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products, and make big bucks doing so, give it a shot at workfall.com/partner today!
