Microfrontend Project

This project demonstrates a microfrontend architecture using a main app and dynamically loaded plugins.

Project Structure

main-app/: The core application that loads and manages plugins
plugin-a/: An example plugin
config-server/: A simple server to provide plugin configurations

Setup and Running

Main App

Navigate to the main-app directory:
```
cd main-app
```
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

The main app will be available at http://localhost:3000.

Plugin A

Navigate to the plugin-a directory:
```
cd plugin-a
```
Install dependencies:
```
npm install
```
Build the plugin:
```
npm run build
```
Serve the built plugin:
```
npm run serve
```

The plugin will be served at http://localhost:5000/plugin-a.js.

Config Server

Navigate to the config-server directory:
```
cd config-server
```
Install dependencies:
```
npm install
```
Start the server:
```
npm start
```

The config server will run on http://localhost:3001.

Adding New Plugins

To add a new plugin:

Create a new directory for your plugin (e.g., plugin-b)
Implement the plugin following the structure of plugin-a
Update the config server to include the new plugin's configuration
Build and serve the new plugin
Restart the main app to load the new plugin

Project Features

Dynamic loading of plugins
React-based main app and plugins
TypeScript support
Vite for fast development and building

Notes

Ensure all servers (main app, plugins, and config server) are running for the full functionality
The main app fetches plugin configurations from the config server on startup
Plugins are loaded dynamically based on the configurations