1.0.2 • Published 9 months ago
micro-react-component v1.0.2
micro-react-component
Description
micro-react-component is a project designed to create modular React components based on a micro frontend architecture. This project allows different parts of applications to come together to form a flexible and scalable structure.
Features
- Modular structure: Components can be developed and deployed independently.
- React-based: Optimized for modern React applications.
- Micro Frontend compatible: Enables collaboration between different teams and projects.
- Tailwind CSS support: Tailwind CSS is used to style user interface components.
- TypeScript support: The project is written in TypeScript, providing type safety and an improved development experience.
- Testing environment: The project is tested using Jest, ensuring the accuracy and reliability of components.
Installation
To run the project in your local environment, follow the steps below:
Clone this repository:
git clone https://github.com/devepdogukan/micro-react-component.gitNavigate to the project directory:
cd micro-react-componentInstall the necessary dependencies:
pnpm installStart the development server:
pnpm start
Configuration
In the webpack.config.js file, you can update the following settings for the ModuleFederationPlugin configuration:
| Setting | Description |
|---|---|
name | Specifies the name of the application. This name will be used by other micro frontend applications. |
port | Specifies the port number on which the application will run. It should be unique to avoid conflicts with other micro frontend applications. |
filename | Specifies the name of the file to be exposed by the application. Other micro frontend applications can use this file to access components. |
exposes | An object that defines the components that can be used by other micro frontend applications. Each component is specified with a key and the corresponding file path. |
new ModuleFederationPlugin({
name: 'microReactComponent',
filename: 'remoteEntry.js',
exposes: {
'./Component': './src/Component',
},
}),