Rspack with Module federation V2 is the future

The module federation team cared deeply about the DevX in their latest release.

The purpose of this blog is to go through setting up the project, and explain a little on each decision being taken here.

Github Repo:

Wanna see the full code, check this app out:

React

Very obvious choice, though I will add vue into the mix soon.

Typescript

Consumer apps in MF V2 generates types out of remotes and being stored by default into @mf-types directory, we are using TS to demonstrate that.

Rspack

In previous blogs we were using webpack, but ever since rspack hit the V1 mark I have been migrating every app I work with into rspack, why? same webpack configuration but with faster and out of the box support for code splitting and module federation, what could you ask for more?

some members webpack core team are the ones building rspack which they have the experience and architecture knowledge transfered into the new bunder rspack should not be looked at as a V1 package, instead it is a continuation to what webpack is.

Setup project

Initialize dir:

First we are going to create the directory and setup package.json.

mkdir ./out-project-name

cd ./out-project-name



pnpm init

Add ESM Config:

We want to make sure our package is ESM based, not CommonJS, so we do the following modification to package.json

npm pkg set type="module"

For more info

Configuration is pretty much similar to previous MF versions.

Setup Consumer app:

CODE Kopieren

// src/FallbackHeader.tsx

export function FallbackHeader() {

  return (

    <div>

      <h1>Fallback Header</h1>

    </div>

  );

}



// src/App.tsx



import { FallbackHeader } from "./FallbackHeader";

import { Suspense } from "react";

import Header from "header/header";



const App = () => {

  return (

    <div className="content">

      <Suspense fallback={<FallbackHeader />}>

        <Header />

      </Suspense>

      <h1>Main App</h1>

    </div>

  );

};



export default App;

Want to learn more about why we adding a fallback Header with the suspense? please checkout part 5 & 6 of this series:

running the app:

One of the true powers of pnpm is the filter flag

which let root package.json exposes internal monorepo scripts

CODE Kopieren

ROOT/package.json

{

"scripts": {

    "header": "pnpm --filter ./apps/header",

    "main": "pnpm --filter ./apps/main"

  },

}

and going into root app and run the following commands each on separate terminal:

CODE Kopieren

pnpm header dev

pnpm main dev

And your app is running!

Vollständiger Original-Artikel

Den kompletten Beitrag mit allen Details direkt auf dev.to lesen.

↗ Original-Artikel auf dev.to lesen