Frontend & Plugin Loading

How Core UI loads plugin remotes at runtime. This guide follows version 3.1.7 (03acdf712c).

For generating a new remote, see Create a Plugin and Frontend Plugins.

Host and remotes

• Host: frontend/core-ui, development server on port 3001 (frontend/core-ui/project.json). Entry is src/main.ts which imports src/bootstrap.tsx.
• Remotes: frontend/plugins/*_ui, each with its own dev port. Checked ports include Sales 3005, Operation 3006, Mongolian 3007, Accounting 3008, Loyalty 3009, Frontline 3004, Content 3003, Insurance 3002.
• Shared singletons in frontend/core-ui/module-federation.config.ts: react, react-dom, react-router, erxes-ui, @apollo/client, jotai, ui-modules, react-i18next.

Development versus production

In development, bootstrap.tsx renders <App /> directly and module-federation.config.ts derives dev remotes from ENABLED_PLUGINS (<name>_ui). Start with:

pnpm dev:uis

with ENABLED_PLUGINS=sales in .env to load sales_ui.

In production, bootstrap.tsx fetches ${REACT_APP_API_URL}/get-frontend-plugins before initializing. Core API serves that list in backend/core-api/src/modules/organization/routes.ts:

• Remote names replace - with _, for example sales_ui.
• Each entry points to https://plugins.erxes.io/<version>/<plugin>_ui/remoteEntry.js, where <version> comes from the plugin's registered config or latest.

Open the Core UI host (http://localhost:3001 locally). A remote URL alone is not the application entry point.

Plugin surface

Each remote exposes ./config (navigation and routes), feature modules, settings, and ./widgets through its own module-federation.config.ts. Core UI renders the navigation and routes declared by the loaded remotes. Keep exposes, config.tsx paths, and actual routes aligned; see Frontend Plugins.

Source references

• Bootstrap and host federation config.
• Plugin discovery endpoint.
• UI startup script.