Skip to main content

Micro-frontend Integration

Integrate Custom Pages into Workspace

About This Guide

This guide introduces Lovrabet's main-sub application architecture, helping you understand how to extend development on top of AI-generated systems.

Architecture Overview​

Lovrabet adopts a micro-frontend architecture. Simply put, it consists of two parts:

  • Main Application: AI auto-generated business system, covering standard features like CRUD, permissions, and approvals

  • Sub-applications: Extension features you develop, such as data dashboards, complex reports, and special interactions. Both appear as a unified whole to users.

┌─────────────────────────────────────────────────────────┐
│                    Lovrabet Workspace                     │
│                     (Main Application)                    │
│  ┌─────────────────────────────────────────────────────┐ │
│  │  AI Auto-generated Business System                   │ │
│  │  • Data Management Pages                             │ │
│  │  • Forms, Lists, Details                             │ │
│  │  • Permission Control, Approval Workflows            │ │
│  └─────────────────────────────────────────────────────┘ │
│                          ▲                               │
│                          │ Integration                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │ Sub-app A │  │ Sub-app B │  │ Sub-app C │              │
│  │ Dashboard │  │ Custom    │  │ Special   │              │
│  │           │  │ Reports   │  │ Business  │              │
│  └──────────┘  └──────────┘  └──────────┘              │
│       ↑              ↑              ↑                    │
│       └──────────────┼──────────────┘                    │
│                      │                                   │
│            Developers build on Rabetbase                  │
└─────────────────────────────────────────────────────────┘

Why Do We Need This Architecture?​

ScenarioMain App CapabilityNeeds Sub App
Standard Data FormsAI Auto-generated-
Complex Data DashboardsBeyond AI capabilityCustom Development
Standard List QueriesAI Auto-generated-
Cross-table Complex ReportsBeyond AI capabilityCustom Development
Approval WorkflowsAI Auto-generated-
Special Business LogicBeyond AI capabilityCustom Development
Third-party System IntegrationBeyond AI capabilityCustom Development

Core Philosophy: Let AI handle standard features, let developers focus on complex business.

Sub-application Development Process​

The entire process consists of five steps. CLI will handle most of the work for you.

Step 1: Create Project​

lovrabet create

Follow the prompts to enter the project name and application code. CLI will automatically create the project structure, configure the SDK, and pull API configurations.

Step 2: Develop Pages​

Develop your pages in the src/pages/ directory:

// src/pages/dashboard.tsx
import { lovrabetClient } from "@/api/client";

function Dashboard() {
  const loadData = async () => {
    const orders = await lovrabetClient.models.orders.filter();
    const customers = await lovrabetClient.models.customers.filter();
    // Process data, render dashboard
  };

  return <div className="dashboard">{/* Your dashboard components */}</div>;
}

// Set the menu display name (important!)
Dashboard.displayName = "Data Dashboard";

export default Dashboard;

Set displayName displayName determines the name displayed in the menu. If not set, the menu will show the English component name or file path.

Step 3: Local Debugging​

lovrabet start

The sub-application runs independently locally, allowing you to preview and debug in real time.

Step 4: Build and Deploy​

lovrabet build
# Deploy the dist/ directory to CDN, get the HTTPS links for JS/CSS

Step 5: Integrate to Main Application​

For first-time deployment, use the sync command to create menus:

lovrabet menu sync

Follow the prompts to select pages to sync, enter CDN links, and the menus will appear in the main application.

Menu Name        Local  Online
  Data Dashboard   ✓      ✗     (needs creation)
  Custom Reports   ✓      ✗     (needs creation)

* JS Link: https://cdn.example.com/assets/index.js
* CSS Link: https://cdn.example.com/assets/index.css

√ Menu creation complete

Menu names are set through the component's displayName property:

// ✅ Recommended: Use displayName
function CustomerList() {
  return <div>Customer List</div>;
}
CustomerList.displayName = "Customer List";
export default CustomerList;

// ✅ Also supported: Arrow function syntax
const OrderList = () => {
  return <div>Order List</div>;
};
OrderList.displayName = "Order List";
export default OrderList;

Name Extraction Priority​

displayName > Component Name > File Path

MethodExampleMenu Name
displayName (Recommended)Component.displayName = "Customer List"Customer List
Component Namefunction CustomerList()CustomerList
File Pathsrc/pages/customer/list.tsxcustomer/list

Iterative Update Process​

After modifying code and redeploying, use the update command to update resource links:

# 1. Rebuild
lovrabet build

# 2. Upload to CDN (get new links)
# https://cdn.example.com/assets/index-v2.js
# https://cdn.example.com/assets/index-v2.css

# 3. Batch update resource links for all menus
lovrabet menu update

sync vs update​

CommandPurposeUse Case
menu syncCreate new menusFirst deployment, adding new pages
menu updateUpdate resource linksAfter modifying code and redeploying

Best Practices

  • Adding new pages: lovrabet menu sync

  • Modifying existing pages: After rebuilding and deploying, lovrabet menu update

Sub-application and Main Application Interaction​

Shared User System​

Sub-applications automatically inherit the main application's login state, no separate authentication needed:

import { lovrabetClient } from "@/api/client";

// Use directly, user is already logged in
const user = await lovrabetClient.api.getCurrentUser();

Shared Data Access​

Sub-applications access all datasets of the main application through the SDK:

const orders = await lovrabetClient.models.orders.filter({
  where: { status: { $eq: "pending" } },
});

const customers = await lovrabetClient.models.customers.filter();

Shared Menu Navigation​

Sub-application pages appear in the main application menu, users switch seamlessly:

Main Application Menu
├── Customer Management  ← AI-generated page
├── Order Management     ← AI-generated page
├── Data Dashboard       ← Your developed sub-app
└── Custom Reports       ← Your developed sub-app

Technical Points​

Sub-application Packaging Requirements​

  • Build output needs to be in UMD or ESM format

  • Needs to export as independent JS/CSS files

  • Must be deployed to an HTTPS-accessible address. Projects created with lovrabet create have these requirements pre-configured.

SDK Configuration​

Sub-applications need SDK configuration to access data. Use CLI to auto-generate:

lovrabet api pull

See Auto-generate SDK Configuration for details.

FAQ​

Can Sub-applications Run Independently?​

Yes. During development, sub-applications can run and debug independently via lovrabet start, but in production they need to be integrated into the main application to use full functionality (user authentication, data permissions, etc.).

Do I Need to Handle CORS Issues?​

No. The SDK already handles authentication and CORS issues.

How to Update Deployed Sub-applications?​

  1. Modify code

  2. lovrabet build to rebuild

  3. Upload to CDN

  4. lovrabet menu update to update resource links. If new pages were added, use lovrabet menu sync to create new menus.

Can Multiple Sub-applications Coexist?​

Yes. Each sub-application is an independent project that can use different tech stacks, all ultimately integrated into the main application menu.

This means displayName is not set. Add before the component export:

ComponentName.displayName = "Display Name";