Learn React Micro Frontend From Scratch Using Webpack

Set up a new React app with Webpack, install React, react-dom, Webpack, and webpack-cli, and create essential files to render the app.

Set up a production webpack build by creating webpack.config.js, adding babel and react presets, and wiring html-webpack-plugin to generate dist assets from public/index.html.

Configure webpack entry and output for a React app by using a custom entry file and bundling the result into bundle.js in a build folder.

Configure webpack to process css files by installing and using css-loader and style-loader, import index.css in index.js, and resolve build errors to apply a blue background with white text.

Learn how webpack processes image and media files by importing a sample jpg, rendering it, and resolving loader errors with a file loader rule.

Configure the webpack dev server for real-time development with hot reloading. Learn to set npm scripts and the dev server port (3000) to see live updates without rebuilding.

Discover how to enable hot reloading in a webpack-based react app with the react refresh webpack plugin, preserving state during updates and configuring the dev server for hot mode.

Design the header for a simple to-do list, illustrating monolith and micro-frontend concepts while highlighting shared components and the monolith todo app title.

Learn to build a to-do form for add and edit routes in a React app, using React Router DOM and toast messages, with fields for name, description, status, and priority.

Style the todo form by creating a CSS file, applying typography and layout to inputs, selects and textarea, and using flex to align status and priority with distinct button styles.

Create a reusable add/edit todo form that saves to local storage, generates a unique id, shows a toast on save, and navigates back to the home page.

Render todo items in a todo list component by retrieving todos from local storage, mapping to show name, description, status, and priority, and navigate to /edit/:todoId for edits and deletions.

Learn to populate and edit a todo item using the id from the url, update the list in local storage, show toast messages, and navigate back home.

Implement delete functionality in a React todo app built on Webpack, updating state and local storage. Explore CRUD operations across home, add, and edit routes, and prepare for micro-frontend architecture.

Explore micro-frontend architecture by converting a monolith todo app into host, todo form, and todo list apps with separate ports, exporting components, and route-based rendering.

Set up and scaffold three react micro frontends (host, form, list) with webpack and MFA, configuring npm, ports, and basic files to run a todo app.

Export the todo form component from the micro-frontend app using a bootstrap file and module federation, then expose it for consumption in the host app with remote entry.

Copy and integrate the header and todo form content from the monolith app into the micro-frontend host, create and import CSS, adjust routes, and validate add and edit tasks.

Export the todo list component and render it in the host app using module federation to expose it and share dependencies across host and remote apps.

Implement the edit todo scenario in a micro-frontend, passing the id, updating priority, and showing toast notifications with React Hot Toast via a webpack module federation setup.

Deploy micro frontends with production webpack configurations across host, todo form, and todo list apps, converting dev to prod and updating remote entry URLs.

Push your micro-frontend code to GitHub and decide between a single repository or separate repos for each app. Learn gitignore basics for node_modules, build, dist, and env files.

Deploy remote micro-frontend applications by pushing code to GitHub and obtaining domain URLs for the todo form and todo list apps on Vercel, then update the host app.

Deploy the host app in a micro-frontend setup with webpack prod, push changes, and verify deployment builds and renders the to-do app.