Module Federation

Naveen kumar Gopi — Sat, 17 Jun 2023 15:42:36 +0000

The module federation plugin spits out this set of files that includes a set of directions on how other projects can get access to the source code - meaning Basically the module federation plugin comes into action when we are working in Micro-Frontend application.

Here inside the plugin array, we need to declare the plugin with its name, filename(visible in network tab), exposes.
The Plugin will create the global object with the name had been declared.
Whereas exposes we need to tell webpack that i need to share the file remotely for that path of the file is mentioned.

Usage:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const devConfig = {
  mode: "development",
  devServer: {
    port: 8081,
    historyApiFallback: {
      index: "index.html",
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "marketing",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/index",
      },
      shared: packageJSON.dependencies,
    }),
  ],
};

ShortNote On NextJs

Naveen kumar Gopi — Sat, 17 Jun 2023 05:56:12 +0000

In NextJs,
SSR :
Pre-generates page during build time meaning all HTML code and contents are prepared in advance.
Once the pages are deployed they can be cached by server meaning pages can be prepared ahead of time and can be cached by server/CDN, which serves the app
These stuffs are possible only with help of exporting getStaticProps() which runs on server side.

Forem: Naveen kumar Gopi

Module Federation

ShortNote On NextJs