This project demonstrates a microfrontend architecture using Webpack Module Federation and TypeScript.
Microfrontend App is a collection of independent frontend modules that are integrated into a shell application using Webpack Module Federation. Each microfrontend can be developed, built, and deployed independently, allowing for scalability and maintainability.
- Webpack Module Federation: Integrates multiple microfrontends into a single shell application.
- TypeScript: Provides type safety and enhances developer productivity.
- React: Frontend library for building user interfaces.
- Redux and Redux Saga: State management and side effects handling.
- ESLint and Prettier: Code linting and formatting for consistent code style.
- Bootstrap and Custom Styling: Responsive design and consistent styling.
Clone the repository:
git clone <repository-url>
cd microfrontend-app
-
Install Dependencies: Ensure you have Node.js (>= 18.12.0) and npm installed. Then, install the required dependencies:
nvm use npm install
-
Start the Development Server: Run the following command to start the development server:
npm run start
The application will be available at
http://localhost:3000
.
To create a production build, run:
npm run build
The output will be in the dist
directory.
microfrontend-app/
├── dist/ # Compiled output
├── node_modules/ # Node.js modules
├── public/ # Static assets
├── src/ # Source files
│ ├── components/ # React components
│ ├── store/ # Store configuration
│ ├── App.tsx # Main app component
│ ├── bootstrap.tsx # App bootstrap file
│ └── index.tsx # Entry point
├── .eslintrc.js # ESLint configuration
├── .prettierrc # Prettier configuration
├── package.json # NPM configuration
├── tsconfig.json # TypeScript configuration
├── webpack.config.js # Webpack configuration
└── README.md # Project documentation
- Webpack: Module bundler and build tool
- React: JavaScript library for building user interfaces
- TypeScript: Superset of JavaScript with type definitions
- Redux: State management library
- Redux-Saga: Middleware for handling side effects
- ESLint: Tool for identifying and fixing linting issues
- Prettier: Code formatter
- Bootstrap: CSS framework for responsive design
Contributions are welcome! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature
). - Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.