The first application in our system

Let's begin by configuring the first application:

We are going to be using the <app> container in the HTML. This first app is a remote application in the federation system and is, therefore, to be consumed by other applications.
To expose the application, we will use the AppContainer method:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin =
   require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
   new ModuleFederationPlugin({
    name: "app_one_remote",
    remotes: {
      app_two: "app_two_remote",
      app_three: "app_three_remote"
 },
 exposes: {
   'AppContainer':'./src/App'
 },
 shared: ["react", "react-dom","react-router-dom"]
 }),
 new HtmlWebpackPlugin({
   template: "./public/index.html",
   chunks: ["main"]
  })
 ]
}

This first application will also consume a component from two other federated applications in the system.

To allow this application to consume components, the remote scope will need to be specified.
All these steps should be followed as specified in the preceding code block.
Now, let's take a look at the HTML segment of the build:

<head>
  <script src="http://localhost:3002/app_one_remote.js"></script>
  <script src="http://localhost:3003/app_two_remote.js"></script>
</head>
<body>
  <div id="root"></div>
</body>

The preceding code shows the <head> element of the HTML. app_one_remote.js connects the runtime and provisional orchestration layer at runtime. It is specifically designed for entry points. These are example URLs and you can use your own locations. It's important to note that this example is a very low-memory example and that your build may be much larger, but it is good enough to understand this principle.

To consume code from a remote application, the first application has a web page that consumes a dialog component from the second application, as follows:

const Dialog = React.lazy(() => import("app_two_remote/Dialogue")); 
const Page1 = () => { 
  return ( 
    <div> 
      <h1>Page 1</h1> 
        <React.Suspense fallback="Loading User Dialogue..."> 
          <Dialog /> 
        </React.Suspense> 
    </div> 
  ); 
}

Let's start by exporting the default HTML page we are using and set up the router, which is done as follows:

import { Route, Switch } from "react-router-dom";
import Page1 from "./pages/page1";
import Page2 from "./pages/page2";
import React from "react";
   const Routes = () => (
     <Switch>
       <Route path="/page1">
        <Page1 />
       </Route>
       <Route path="/page2">
        <Page2 />
       </Route>
     </Switch>
  );

The preceding code block shows how the code works; it will export the default routes from each page in the system we are developing.

This system is part of three applications, the second of which we will look at now.

Table of Contents for The first application in our system

Create new playlist

Sign In

Sign Up

Table of Contents for
The first application in our system