This content originally appeared on Level Up Coding - Medium and was authored by Rany ElHousieny
Microfrontend Module Federation: Exposing Remote from Legacy React Webpack4 Created by create-react-app
While building a new portal with Webpack 5, React, and Module Federation, I wanted to include one of the components in a legacy React component created by create-react-app on Webpack 5. In this article, I will explain how I have done that successfully on a React-APP made with create-react-app
===================
Create a new react app
npx create-react-app new-react-app
cd new-react-app
mkdir module-federation
code .
yarn start
You should see the regular CRA page.
Now, we need to import this page to a Module Federation Container
Exposing as a Remote
- please create a new directory inside new-react-app and give it a name (I gave it module-federation)
2. create a file named webpack.config.js
3. create an src directory and inside it create an empty index.js
you can copy the following steps to the terminal inside the new-react-app directory
mkdir module-federation
cd module-federation
touch webpack.config.js
touch package.json
mkdir src
touch src/index.js
yarn add webpack webpack-cli html-webpack-plugin babel-loader @babel/plugin-transform-runtime style-loader css-loader sass-loader
Add the following inside module-federation/webpack.config.js (https://github.com/ranyelhousieny/microfrontend-template/blob/main/webpack.config.js )
Make sure to save the file.
====
Add the following inside module-federation/package.json
(https://github.com/ranyelhousieny/microfrontend-template/blob/main/package.json)
Make sure to save the file.
=======
Now install dependencies. From inside module-federation run yarn install
Build the directory, From inside module-federation run yarn webpack build
This will create a directory dist inside module-federation with few files
We only need remoteEntry.js
Let’s serve this remote by running. yarn webpack serve
When you browse to http://localhost:8001/remoteEntry.js, you should be able to see the file.
This is the file that you should remote to from a Microfrontend Container.
===================
Add the remote to Microfrontend Container.
Now, let’s add it to a Microfrontend host that we created before. You can get it from https://github.com/ranyelhousieny/react-microfrontends.git as follows:
git clone https://github.com/ranyelhousieny/react-microfrontends.git
cd react-microfrontends
cd mfe2
yarn install
code .
yarn webpack serve
If you browse to http://localhost:8082/, you should see the following
Now, we will replace the MFE1 with the remote we created from CRA at http://localhost:8001/remoteEntry.js
in mfe2/webpack.config.js to replace the remote to http://localhost:8001/remoteEntry.js as follows.
In mfe2/src/App.js, change the import from MFE1/Button to MFE1/MFE1 as follows:
This is the overall idea. We still need to add some dependencies and shared components to make this work, which I will discuss in a future article.
Microfrontend Module Federation: Exposing Remote from Legacy React Webpack4 Created by… was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Rany ElHousieny
Rany ElHousieny | Sciencx (2021-10-29T02:41:39+00:00) Microfrontend Module Federation: Exposing Remote from Legacy React Webpack4 Created by…. Retrieved from https://www.scien.cx/2021/10/29/microfrontend-module-federation-exposing-remote-from-legacy-react-webpack4-created-by/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.