{"id":43168,"date":"2022-10-21T16:24:02","date_gmt":"2022-10-21T16:24:02","guid":{"rendered":"https:\/\/polarising.com\/techinside\/?p=43168"},"modified":"2022-10-21T16:24:05","modified_gmt":"2022-10-21T16:24:05","slug":"micro-frontends-basic-example-with-react-tailwind-and-module-federation-2-2","status":"publish","type":"post","link":"https:\/\/polarising.com\/techinside\/micro-frontends-basic-example-with-react-tailwind-and-module-federation-2-2\/","title":{"rendered":"Micro Frontends: Basic example with React, Tailwind and Module Federation. (2\/2)"},"content":{"rendered":"\n
<\/div>\n\n\n\n

This tutorial is a follow up to my previous Micro Frontend (MFE) article, which tackles the basic “What, Why, How” questions of MFEs. The goal is to provide a simple use-case that serves as a launchpad for you to start using Micro Frontends through Module Federation in your projects.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Generating the projects.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

In order to display the ease of use of MicroFrontends with Module Federation, I’m going to provide a basic example using React.<\/p>\n\n\n\n

In the directory of your choice, run the command<\/p>\n\n\n\n

<\/div>\n\n\n\n

npx create-mf-app<\/p>\n\n\n\n

<\/div>\n\n\n\n

to create a new MFE project. For the purposes of this example, I’m going to create two projects: host and remote. A few prompts will appear asking for the specs of the project, which for the host are:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

After choosing the specs, the command will conclude and you can navigate to the new directory and run<\/p>\n\n\n\n

<\/div>\n\n\n\n

npm install <\/p>\n\n\n\n

<\/div>\n\n\n\n

to install all the necessary dependencies. For this example we will need Bootstrap and a router, so you will need to run<\/p>\n\n\n\n

<\/div>\n\n\n\n

npm install react-router-dom<\/p>\n\n\n\n

npm install react-bootstrap bootstrap<\/p>\n\n\n\n

<\/div>\n\n\n\n

as well.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Now, going back to the initial directory, we run the same create-mf-app command to generate the remote project, with the following specs:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And then navigating to this project and running<\/p>\n\n\n\n

<\/div>\n\n\n\n

npm install<\/p>\n\n\n\n

<\/div>\n\n\n\n

In order to run the projects and see the generated pages, run<\/p>\n\n\n\n

<\/div>\n\n\n\n

npm start<\/p>\n\n\n\n

<\/div>\n\n\n\n

in each of the project’s directories.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Note:<\/strong> You can choose whichever port numbers you like, just make sure they aren’t the same for the host and the remote<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

Creating the Remote Page.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

For the remote page, we could leave it as is since the command creates a boilerplate page with the chosen specs of the project. I prefer to display a more relevant message to the example, so in the remote project navigate to the src directory and create a file called RemotePage.jsx<\/strong> (src\/RemotePage.jsx) with the following code:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;<\/p>\n\n\n\n

export default function RemotePage() {
    return(
        <div className=”mt-10 text-3xl mx-auto max-w-6xl”>
            This is the Remote Page!
        <\/div>
    )
}<\/p>\n\n\n\n

<\/div>\n\n\n\n

Now, in the src\/App.jsx<\/strong> file, change the code to the following:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;
import ReactDOM from “react-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import “.\/index.scss”;
import RemotePage from “.\/RemotePage”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

 const App = () => (
  <RemotePage \/>
);<\/p>\n\n\n\n

<\/div>\n\n\n\n

ReactDOM.render(<App \/>, document.getElementById(“app”));<\/p>\n\n\n\n

<\/div>\n\n\n\n

After these two steps you should see a page like this:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Configuring the Host.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

The host requires a bit more work, so let’s get to it!<\/p>\n\n\n\n

First we need to create a component for the navbar. To do that, navigate to the src directory and create a NavbarComponent.jsx <\/strong>file:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import Container from ‘react-bootstrap\/Container’;
import Nav from ‘react-bootstrap\/Nav’;
import Navbar from ‘react-bootstrap\/Navbar’;<\/p>\n\n\n\n

<\/div>\n\n\n\n

export default function NavbarComponent() {
    return (
        <Navbar bg=”light” expand=”lg”>
        <Container>
          <Navbar.Brand href=”#home”>React-Bootstrap<\/Navbar.Brand>
          <Navbar.Toggle aria-controls=”basic-navbar-nav” \/>
          <Navbar.Collapse id=”basic-navbar-nav”>
            <Nav className=”me-auto”>
              <Nav.Link href=”\/”>Home<\/Nav.Link>
            <\/Nav>
          <\/Navbar.Collapse>
        <\/Container>
      <\/Navbar>
    );
  }<\/p>\n\n\n\n

<\/div>\n\n\n\n

The navbar will have two tabs, the Home<\/strong> and the Remote<\/strong>, which will house our Micro Frontend imported through Module Federation.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Note:<\/strong> You’ll notice this component uses Bootstrap, so don’t forget to add it to the src\/index.html<\/strong> file:<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

<!DOCTYPE html>
<html lang=”en”><\/p>\n\n\n\n

<\/div>\n\n\n\n

<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <link
  rel=”stylesheet”
  href=”https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css”
  integrity=”sha384-0evHe\/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor”
  crossorigin=”anonymous”
\/>
  <title>host<\/title>
<\/head><\/p>\n\n\n\n

<\/div>\n\n\n\n

<body>
  <div id=”app”><\/div>
<\/body><\/p>\n\n\n\n

<\/div>\n\n\n\n

<\/html><\/p>\n\n\n\n

<\/div>\n\n\n\n

Next, we need to create our Home page and add the router. We’ll start with the Home page, which will be on the src\/Home.jsx<\/strong> file:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

export default function Home() {
    return (
        <div className=”mt-10 text-3xl mx-auto max-w-6xl”>Home page<\/div>
    );
  }<\/p>\n\n\n\n

<\/div>\n\n\n\n

And now the router, which will be on the src\/App.jsx<\/strong> file:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;
import ReactDOM from “react-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import “.\/index.scss”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import { BrowserRouter,  Routes, Route} from “react-router-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import Home from ‘.\/Home’<\/p>\n\n\n\n

<\/div>\n\n\n\n

import NavbarComponent from “.\/NavbarComponent”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

const App = () => (
    <BrowserRouter>
    <NavbarComponent \/>
      <div className=”text-3xl mx-auto max-w-6xl”>
        <div className=”my-10″>
          <Routes>
            <Route path=”\/” element={ <Home \/>}><\/Route>
          <\/Routes>
        <\/div>
      <\/div>
    <\/BrowserRouter>
    );<\/p>\n\n\n\n

<\/div>\n\n\n\n

ReactDOM.render(<App \/>, document.getElementById(“app”));<\/p>\n\n\n\n

<\/div>\n\n\n\n

Exposing the Remote Page.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

After all this setup, it’s time for some Module Federation Magic. We’ll start by going to the \/remote\/webpack.config.js<\/strong> file and exposing our Remote Page:<\/p>\n\n\n\n

<\/div>\n\n\n\n

plugins: [
    new ModuleFederationPlugin({
      name: “remote”,
      filename: “remoteEntry.js”,
      remotes: {},
      exposes: {
        “.\/RemotePage”: “.\/src\/RemotePage.jsx”
      },
      shared: {
        …deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        “react-dom”: {
          singleton: true,
          requiredVersion: deps[“react-dom”],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: “.\/src\/index.html”,
    }),
  ],<\/p>\n\n\n\n

<\/div>\n\n\n\n

In the Plugins<\/strong> array you’ll see a ModuleFederationPlugin<\/strong> with a remotes<\/strong> and exposes<\/strong> property. Since we want to expose the RemotePage, we’ll add the path of the component in the exposes<\/strong>.<\/p>\n\n\n\n

The Remote is all done, now on to importing the component in the Host.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Importing the Remote.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

In order to import an MFE, we need to go to the webpack.config.js<\/strong> of the project where we want to import the component and locate the plugins<\/strong> array, like we did to expose our RemotePage. For our host, it should be in the host\/webpack.config.js<\/strong> file. To connect both projects, we’re going to pass to the host the URL of the Remote’s remoteEntry.js<\/strong> file:<\/p>\n\n\n\n

<\/div>\n\n\n\n

plugins: [
    new ModuleFederationPlugin({
      name: “host”,
      filename: “remoteEntry.js”,
      remotes: {
        remote: “remote@http:\/\/localhost:4001\/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”,
    }),
  ],<\/p>\n\n\n\n

<\/div>\n\n\n\n

Note:<\/strong> if you chose another port number for the remote, use that instead of 4001<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

Using a Micro Frontend.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

Now the fun part: using our new component.<\/p>\n\n\n\n

First, we’re going to add a Remote<\/strong> to our navbar host\/src\/NavbarComponent.jsx:<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import Container from ‘react-bootstrap\/Container’;
import Nav from ‘react-bootstrap\/Nav’;
import Navbar from ‘react-bootstrap\/Navbar’;<\/p>\n\n\n\n

<\/div>\n\n\n\n

export default function NavbarComponent() {
    return (
        <Navbar bg=”light” expand=”lg”>
        <Container>
          <Navbar.Brand href=”#home”>React-Bootstrap<\/Navbar.Brand>
          <Navbar.Toggle aria-controls=”basic-navbar-nav” \/>
          <Navbar.Collapse id=”basic-navbar-nav”>
            <Nav className=”me-auto”>
              <Nav.Link href=”\/”>Home<\/Nav.Link>
              <Nav.Link href=”\/remote”>Remote<\/Nav.Link>
            <\/Nav>
          <\/Navbar.Collapse>
        <\/Container>
      <\/Navbar>
    );
  }<\/p>\n\n\n\n

<\/div>\n\n\n\n

And then we’ll add the Route to our Router in host\/src\/App.jsx<\/strong> and import the RemotePage<\/strong> like it was a normal component:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;
import ReactDOM from “react-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import “.\/index.scss”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import { BrowserRouter,  Routes, Route} from “react-router-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import Home from ‘.\/Home’<\/p>\n\n\n\n

<\/div>\n\n\n\n

import NavbarComponent from “.\/NavbarComponent”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import RemotePage from ‘remote\/RemotePage’;<\/p>\n\n\n\n

<\/div>\n\n\n\n

const App = () => (
    <BrowserRouter>
    <NavbarComponent \/>
      <div className=”text-3xl mx-auto max-w-6xl”>
        <div className=”my-10″>
          <Routes>
            <Route path=”\/” element={ <Home \/>}><\/Route>
            <Route path=”\/remote” element={<RemotePage \/>}><\/Route>
          <\/Routes>
        <\/div>
      <\/div>
    <\/BrowserRouter>
    );<\/p>\n\n\n\n

<\/div>\n\n\n\n

ReactDOM.render(<App \/>, document.getElementById(“app”));<\/p>\n\n\n\n

<\/div>\n\n\n\n

Notice how we imported from remote\/RemotePage:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import RemotePage from ‘remote\/RemotePage’<\/p>\n\n\n\n

<\/div>\n\n\n\n

We do this because when we specified the remote in the webpack.config.js file, we used<\/p>\n\n\n\n

<\/div>\n\n\n\n

remotes: {
        remote: “remote@http:\/\/localhost:4001\/remoteEntry.js”
      }<\/code><\/p>\n\n\n\n

<\/div>\n\n\n\n

If our project had another name, we would change this too<\/p>\n\n\n\n

<\/div>\n\n\n\n

remotes: {
        anotherName: “anotherName@http:\/\/localhost:4001\/remoteEntry.js”
      }<\/p>\n\n\n\n

<\/div>\n\n\n\n

import RemotePage from ‘anotherName\/RemotePage’<\/p>\n\n\n\n

<\/div>\n\n\n\n

And that’s it! Just rerun both projects and you should have a functional MFE project with a Home page and a Remote page, running on another project and imported at runtime.<\/p>\n\n\n\n

With this basic example running, it’s really easy to spot the advantages of this approach. If you change the RemotePage.jsx<\/strong> file (and assuming there are no errors) you’ll notice that all it takes on the Host’s side to get the new version is refreshing the page.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Error Handling.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

The problem is that things don’t run well 100% of the time. Sometimes the MFE team makes a breaking change or the Remote crashes and everything falls apart. You can replicate this behaviour by stopping the remote<\/strong> process.<\/p>\n\n\n\n

As good as this is, there is still room for improvement. The whole point of this is reducing bundle sizes and having different teams work on each MFE, but so far we haven’t reached this level of improved workflow and deployment.<\/p>\n\n\n\n

We can take advantage of React’s Lazy<\/strong> and Suspense<\/strong> to guard our host against errors from the Remote, and make the whole application more robust as a result.<\/p>\n\n\n\n

In order to do this, start by adding a SafeComponent<\/strong> in your host\/src<\/strong> directory, with the following code:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

export default class SafeComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }<\/p>\n\n\n\n

<\/div>\n\n\n\n

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }<\/p>\n\n\n\n

<\/div>\n\n\n\n

    componentDidCatch() {}<\/p>\n\n\n\n

<\/div>\n\n\n\n

    render() {
        if(this.state.hasError) {
            return <h1>Something went wrong<\/h1>
        }<\/p>\n\n\n\n

<\/div>\n\n\n\n

        return this.props.children;
    }
}<\/p>\n\n\n\n

<\/div>\n\n\n\n

Then we’ll create a SafeRemoteComponent.jsx<\/strong>, also in the src<\/strong> folder:<\/p>\n\n\n\n

<\/div>\n\n\n\n

import React, {Suspense} from “react”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import SafeComponent from “.\/SafeComponent”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

const RemotePage = React.lazy( () => import(‘remote\/RemotePage’))<\/p>\n\n\n\n

<\/div>\n\n\n\n

export default function SafeRemoteComponent() {
    return(
        <SafeComponent>
            <Suspense fallback={<div>Loading…<\/div>}>
                <RemotePage \/>
            <\/Suspense>
        <\/SafeComponent>
    );
}<\/p>\n\n\n\n

<\/div>\n\n\n\n

This is the place where the magic happens. First, we lazy load our Remote<\/strong> page, which will grant us the faster load times when we open the application. Then, we use Suspense to display a fallback message in case the application takes a long time loading the remote (or can’t load it at all). Now we just need to add this to our Router, and it’s done:<\/p>\n\n\n\n

<\/div>\n\n\n\n

host\/src\/App.jsx<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

import React from “react”;
import ReactDOM from “react-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import “.\/index.scss”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import { BrowserRouter,  Routes, Route} from “react-router-dom”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import Home from ‘.\/Home’<\/p>\n\n\n\n

<\/div>\n\n\n\n

import NavbarComponent from “.\/NavbarComponent”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

import SafeRemoteComponent from “.\/SafeRemoteComponent”;<\/p>\n\n\n\n

<\/div>\n\n\n\n

const App = () => (
    <BrowserRouter>
    <NavbarComponent \/>
      <div className=”text-3xl mx-auto max-w-6xl”>
        <div className=”my-10″>
          <Routes>
            <Route path=”\/” element={ <Home \/>}><\/Route>
            <Route path=”\/remote” element={
                <SafeRemoteComponent \/>
            }><\/Route>
          <\/Routes>
        <\/div>
      <\/div>
    <\/BrowserRouter>
    );<\/p>\n\n\n\n

<\/div>\n\n\n\n

ReactDOM.render(<App \/>, document.getElementById(“app”));<\/p>\n\n\n\n

<\/div>\n\n\n\n

Now, if you rerun Host you’ll see a more pleasant “Something Went Wrong” message in the remote tab instead of a hard crash:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

And now with no error:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Wrapping up.<\/h2>\n\n\n\n
<\/div>\n\n\n\n

In this example we’ve build a simple web application using React, Tailwing and Webpack to take advantage of its Module Federation technology. This is only a starting point, there is still much more to discover and experiment, such as combining different Frontend frameworks in the same Host, or synchronizing state between the Host and the Remotes.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Happy coding \ud83d\ude42<\/p>\n\n\n\n

<\/div>\n\n\n\n

Jo\u00e3o Oliveira<\/strong>
<\/strong>Software Developer at Polarising<\/p>\n\n\n\n

<\/div>\n\n\n\n

Sources:<\/strong>
https:\/\/www.youtube.com\/watch?v=lKKsjpH09dU&ab_channel=freeCodeCamp.org<\/a> (freeCodeCamp.org. (2021, November 10). Micro-Frontends Course – Beginner to Expert [Video]. YouTube. Retrieved August 23, 2022)<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial is a follow up to my previous Micro Frontend (MFE) article, which tackles the basic “What, Why, How” questions of MFEs. The goal is to provide a simple use-case that serves as a launchpad for you to start using Micro Frontends through Module Federation in your projects. Generating the projects. In order to […]<\/p>\n","protected":false},"author":41,"featured_media":41280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[],"class_list":["post-43168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"uagb_featured_image_src":{"full":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured.jpg",1600,900,false],"thumbnail":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-150x150.jpg",150,150,true],"medium":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-300x169.jpg",300,169,true],"medium_large":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-768x432.jpg",768,432,true],"large":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured.jpg",1600,900,false],"authorship-box-avatar":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-150x150.jpg",150,150,true],"authorship-box-related":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-70x70.jpg",70,70,true]},"uagb_author_info":{"display_name":"Jo\u00e3o Oliveira","author_link":"https:\/\/polarising.com\/techinside\/author\/joao-oliveira\/"},"uagb_comment_info":0,"uagb_excerpt":"This tutorial is a follow up to my previous Micro Frontend (MFE) article, which tackles the basic “What, Why, How” questions of MFEs. The goal is to provide a simple use-case that serves as a launchpad for you to start using Micro Frontends through Module Federation in your projects. Generating the projects. In order to…","_links":{"self":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/comments?post=43168"}],"version-history":[{"count":28,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43168\/revisions"}],"predecessor-version":[{"id":43267,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43168\/revisions\/43267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/media\/41280"}],"wp:attachment":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/media?parent=43168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/categories?post=43168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/tags?post=43168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}