Skip to main content

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 Lovrabet-generated systems.

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 Features)                │ │
│  └─────────────────────────────────────────────────────┘ │
│                          ▲                               │
│                          │ Integration                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │ Sub-app A │  │ Sub-app B │  │ Sub-app C │              │
│  │ Dashboard │  │ Custom    │  │ Special   │              │
│  │           │  │ Reports   │  │ Business  │              │
│  └──────────┘  └──────────┘  └──────────┘              │
│       ↑              ↑              ↑                    │
│       └──────────────┼──────────────┘                    │
│                      │                                   │
│            Technical staff develop based on Rabetbase      │
│                 (Covers 30% Complex Features)             │
└─────────────────────────────────────────────────────────┘

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, and user system
  • Used directly by business personnel

Sub-applications: Developer Extensions​

  • Developed by technical staff, handling complex business scenarios
  • Covers 30% of customization needs (data screens, complex reports, special interactions, etc.)
  • Developed through Rabetbase (SDK, API, CLI)
  • Finally integrated into the main application menu

Why Do We Need Main-Sub Application Architecture?​

ScenarioMain App CapabilityNeeds Sub App
Standard Data Forms✅ AI Auto-generated-
Complex Data Screens❌✅ 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 Process​

Step 1: Create Project​

Use CLI to create a sub-application project:

lovrabet create

Follow the 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 Screen
 */
import { lovrabetClient } from '@/api/client';

export default function Dashboard() {
  // Use SDK to get data
  const loadData = async () => {
    const orders = await lovrabetClient.models.orders.filter();
    const customers = await lovrabetClient.models.customers.filter();
    // Process data, render screen
  };

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

Step 3: Local Debugging​

lovrabet start

The sub-application will start locally and you can debug independently.

Step 4: Build and Deploy​

# Build
lovrabet build

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

Step 5: Integrate to Main Application​

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

lovrabet menu sync

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

  Menu Name       Local  Online
  Data Screen     ✓      ✗     (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 the Lovrabet workspace and you can see your sub-application pages.

Interaction Between Sub-application and Main Application​

Shared User System​

Sub-applications automatically inherit the main application's user 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 SDK:

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

Main Application Menu
├── Customer Management  ← AI-generated page
├── Order Management     ← AI-generated page
├── Data Screen         ← 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 HTTPS accessible address

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

Use Title comment at the top of the page file:

/**
 * Title: Data Screen
 */
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.

Common Issues​

Can Sub-applications Run Independently?​

Yes. Sub-applications can run and debug independently during development (lovrabet start), but in production environment 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. 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 the main application menu.