Skip to content

ohcnetwork/micro_frontend_experiment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

  1. Navigate to the main-app directory:

    cd main-app
    
  2. Install dependencies:

    npm install
    
  3. Start the development server:

    npm run dev
    

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

Plugin A

  1. Navigate to the plugin-a directory:

    cd plugin-a
    
  2. Install dependencies:

    npm install
    
  3. Build the plugin:

    npm run build
    
  4. Serve the built plugin:

    npm run serve
    

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

Config Server

  1. Navigate to the config-server directory:

    cd config-server
    
  2. Install dependencies:

    npm install
    
  3. Start the server:

    npm start
    

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

Adding New Plugins

To add a new plugin:

  1. Create a new directory for your plugin (e.g., plugin-b)
  2. Implement the plugin following the structure of plugin-a
  3. Update the config server to include the new plugin's configuration
  4. Build and serve the new plugin
  5. 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

About

A toy template created with clude and cursor

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published