logotype
  • About Us
  • Services
  • Expertise
  • Startups
  • Portfolio
  • Blog
  • Careers
  • UK
    • UK
    • AL
get in touch

Type [To] Search

Search
Close
  • About Us
  • Services
  • Expertise
  • Startups
  • Portfolio
  • Blog
  • Careers
  • UK
    • UK
    • AL
logotype

Type [To] Search

logotype
  • About Us
  • Services
  • Expertise
  • Startups
  • Portfolio
  • Blog
  • Careers
  • UK
    • UK
    • AL
Button Link Example
Software

MICROFRONTENDS WITH REACT

November 21, 2022

It is common knowledge that the best method to tackle any software issue is to disassemble the problem. Whether it be by rewriting your code to create functions that are more manageable and clear, there are multiple ways to accomplish this.

Why use Micro Frontends?

Large applications have profited in multiple ways from the development of microservices, which have advanced in recent years. It is helpful in the process of efficiently developing, deploying, and scaling the separate components of the application backend.

Nevertheless, many developers have become aware that similar difficulties exist for the front-end as well. It is at this stage that the breaking up of the frontend monolith into individual micro front-ends usually begins.

Module federation (Module Federation | webpack)

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin

I’ll create 2 apps in this article:

  • First: Container app that will be used as a base for the micro frontends.
    •  
  • Second: The counter app that will get rendered inside the container app.

Let’s update the webpack.config.js file inside the Counter app. Add ModuleFederationPlugin to the plugins array with the following configuration:

webpack.config.js

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "counter",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Counter": "./src/components/Counter",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
Let’s update the webpack.config.js file inside the Container app.
plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        counter: "counter@http://localhost:8081/remoteEntry.js",
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
Now in src/App.js
import React from "react";
import ReactDOM from "react-dom";
import { Counter } from 'counter/Counter';
import "./index.css";
const App = () => (
  <div className="container">
    <h1>Container App</h1>
    <Counter /> // Micro frontend app
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

If we run both apps, we should see Counter app inside of Container app working as it should.

Notice: both apps need to be running for Microfrontends to work.

Also in production you can update the app deploy url’s to remote server url.

 

That’s it.

Now you can split your apps into smaller, more manageable chunks.

 

Thanks for reading!

reactjs
HOW TO RENDER BIG LISTS IN REACT

HOW TO RENDER BIG LISTS IN REACT

November 21, 2022

UNLOCKING SUCCESS: THE CRUCIAL ROLE OF MVP IN LAUNCHING YOUR BUSINESS

April 9, 2024
UNLOCKING SUCCESS: THE CRUCIAL ROLE OF MVP IN LAUNCHING YOUR BUSINESS

Related Posts

Software
June 3, 2022By jona dajci

INTUITIVE UI.WHAT DOES IT MEAN AND HOW CAN YOU DESIGN IT?

READ MORE

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • CANCELLED FLIGHTS – MAJOR OUTAGE DISRUPTS GLOBAL USERS
  • WHEN TO HIRE A FULL-STACK DEVELOPER vs. A DEVELOPMENT AGENCY
  • 8 MISTAKES TO AVOID WHEN OUTSOURCING SOFTWARE DEVELOPMENT
  • 5-STEP GUIDE TO E-COMMERCE EXCELLENCE
  • UNLOCKING SUCCESS: THE CRUCIAL ROLE OF MVP IN LAUNCHING YOUR BUSINESS

Recent Comments

No comments to show.

Archives

  • July 2024
  • May 2024
  • April 2024
  • November 2022
  • July 2022
  • June 2022
  • April 2022

Categories

  • Case Study
  • Software
  • Top Tips
  • Trends
logotype
We are an Innovative Software Company with a passion for excellence

Contacts

info@atrax.uk

Linkedin Instagram Facebook

Services

  • Minimum Viable Product
  • Product Development
  • Dedicated Teams
  • Staff Augmentation

Industries

  • Cyber Security
  • Hospitality & Real Estate
  • Fintech
  • Healthcare
  • eGovernment
  • © 2024 All Rights Reserved.
  • Cookie policy
  • Privacy policy
  • Terms of use
BACK TO TOP