Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Setting Up the Remote Project for React Micro Frontends

DEV Community·Aemarajan S·about 1 month ago
#5VzAMnTY
Reading 0:00
15s threshold

In the previous guide, we built the Shell Project — the central container that hosts and manages micro frontends. If you missed it, check out Setting Up the Shell Project for React Micro Frontends to get started. Now, it’s time to build our first Remote Project — the independent micro frontend that the Shell will load dynamically using Webpack Module Federation. By the end of this post, you’ll have a working remote React app that connects seamlessly with your Shell. Step 1: Create a React App for the Remote Just like we did with the Shell, let’s create a new React app for our remote micro frontend: npx create-react-app mfe1 Enter fullscreen mode Exit fullscreen mode This will scaffold a fresh React project called mfe1 with all the basics in place. Step 2: Install and Configure html-webpack-plugin Just like we did with the Shell, our Remote app also needs Webpack to generate the index.html file and inject the bundled JavaScript automatically.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More