Skip to main content

Main-Sub Application Architecture

About This Document

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

Architecture Overview​

Lovrabet adopts a micro-frontend architecture, divided into main application and sub-applications:

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

Main Application: Lovrabet Workspace​

  • Auto-generated by AI, no development needed
  • Covers 70% of standard business functions (CRUD, permissions, approvals, etc.)
  • Provides unified navigation, menus, user system
  • Directly used by business users

Sub-applications: Developer Extensions​

  • Built by developers to handle complex business scenarios
  • Covers 30% of customization needs (dashboards, complex reports, special interactions, etc.)
  • Developed through Rabetbase (SDK, API, CLI)
  • Finally integrated into the main application's menu

Why Main-Sub Application Architecture?​

ScenarioMain App CapabilityNeeds Sub-app
Standard Data Forms✅ AI Auto-generated-
Complex Data Dashboard❌✅ Custom Development
Standard List Queries✅ AI Auto-generated-
Cross-table Complex Reports❌✅ Custom Development
Approval Workflows✅ AI Auto-generated-
Special Business Logic❌✅ Custom Development
Third-party System Integration❌✅ Custom Development

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

Sub-application Development Workflow​

Step 1: Create Project​

Use CLI to create a sub-application project:

lovrabet create

Follow prompts to enter project name and application code, CLI will automatically:

  • Create project structure
  • Configure SDK
  • Pull API configuration

Step 2: Develop Pages​

Develop your pages in the src/pages/ directory:

// src/pages/dashboard.tsx
/**
 * Title: Data Dashboard
 */
import { lovrabetClient } from '@/api/client';

export default function Dashboard() {
  // Use SDK to fetch data
  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>
  );
}

Step 3: Local Debugging​

lovrabet start

Sub-application will start locally, you can debug independently.

Step 4: Build and Deploy​

# Build
lovrabet build

# Deploy to CDN
# Get HTTPS links for JS/CSS

Step 5: Integrate into Main Application​

Use menu sync to sync sub-application pages to main application menu:

lovrabet menu sync

Follow prompts to select pages to sync, enter CDN links, complete integration.

  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

Now open Lovrabet workspace, and you can see your sub-application pages.

Interaction Between Sub-app and Main App​

Shared User System​

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

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

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

Shared Data Access​

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

// Access main application's data
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 main application's menu, users switch seamlessly:

Main App Menu
├── Customer Management  ← AI-generated page
├── Order Management     ← AI-generated page
├── Data Dashboard       ← Your sub-application
└── Custom Reports       ← Your sub-application

Technical Key Points​

Sub-application Bundling Requirements​

  • Build output needs to be in UMD or ESM format
  • Needs to export as standalone JS/CSS files
  • Must be deployed to HTTPS accessible address

Projects created with lovrabet create have these requirements pre-configured.

Use Title comment at the top of page file:

/**
 * Title: Data Dashboard
 */
export default function Dashboard() {}

See Sync Menu to Workspace for details.

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. Sub-applications can run and debug independently during development (lovrabet start), but in production they need to be integrated into main application to use full functionality (user authentication, data permissions, etc.).

Do I need to handle CORS issues?​

No. Sub-applications access data through SDK, which already handles authentication and CORS issues.

How to update deployed sub-applications?​

  1. Modify code
  2. Rebuild: lovrabet build
  3. Redeploy to CDN
  4. If new pages added, need to menu sync again

Can multiple sub-applications coexist?​

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