Gpb With Microfrontends

screenshot of Gpb With Microfrontends
react
ant-design

Gpb With Microfrontends

Webpack 5 Module Federation GPB Test App with React/Typescript

Overview

The Webpack 5 Module Federation GPB Test App is a project consisting of five components: a host app (gpb_container), a UI kit (gpb_ui), and three remote apps (gpb_test1, gpb_test2, gpb_test3). The gpb_container app contains the main layout and imports the gpb_test1, gpb_test2, and gpb_test3 apps. The UI kit is based on Ant Design. The project utilizes React, Typescript, Ant Design, Webpack, Lerna, React Router V6, Redux Toolkit (RTK Query), Formik, Pusher-JS, and Storybook. The deployment includes a backend component.

Features

  • Module Federation: The project uses Webpack 5 Module Federation to allow sharing of code between different microfrontends.
  • Multiple Apps: The project consists of multiple apps, including a host app, three remote apps, and a UI kit.
  • Ant Design: The UI kit used in the project is based on Ant Design, providing a set of predefined components.
  • Global Deployment: Each app has been deployed to a specific URL, allowing access for testing and feedback.

Installation

To run the demo, follow these steps:

  1. Install Lerna globally by running the following command:
npm install -g lerna
  1. Navigate to the root of your project and run the following command to install the necessary dependencies:
lerna bootstrap
  1. Finally, start all your projects simultaneously and open your browser. The different URLs for each app are as follows:
  • gpb_container: http://localhost:3000/
  • gpb_test1: http://localhost:3001/
  • gpb_test2: http://localhost:3002/
  • gpb_test3: http://localhost:3003/

Summary

The Webpack 5 Module Federation GPB Test App is a project that showcases the use of Webpack 5's Module Federation feature to create and share microfrontend applications. It includes a host app, three remote apps, and a UI kit based on Ant Design. The project utilizes various technologies such as React, Typescript, Webpack, Lerna, and more. By following the installation guide, users can run the demo locally and access each app using their respective URLs. Additionally, the project has been deployed globally for testing and feedback.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.