Sync Menu to Workspace

About This Document

This document explains how to use the lovrabet menu sync command to automatically sync your locally developed pages to the Lovrabet workspace menu.

This is a key step in micro-frontend integration—making your custom pages appear in the Lovrabet workspace.

What Problem Does This Command Solve?

When developing custom pages with Rabetbase, you need to "mount" the pages to the Lovrabet workspace menu:

┌─────────────────────────────────────────────────────────┐
│  Your Local Project                Lovrabet Workspace   │
├─────────────────────────────────────────────────────────┤
│  src/pages/                                              │
│    ├── dashboard.tsx    ─────►   📊 Dashboard           │
│    ├── user/profile.tsx ─────►   👤 User Profile        │
│    └── orders/list.tsx  ─────►   📦 Order List          │
└─────────────────────────────────────────────────────────┘

Without this command: You need to manually log in to the Lovrabet admin panel, create menus one by one, configure paths, resource links...

With this command: One command scans local pages and automatically creates menus.

Prerequisites

• Logged in: lovrabet auth
• Application configured: lovrabet config set app your-app-code
• Project built and deployed to CDN (requires HTTPS links for JS/CSS)

Usage

Step 1: Build and Deploy Project

# Build project
lovrabet build   # or npm run build

# Deploy to CDN, get resource links
# Example: https://cdn.example.com/assets/index.js
# Example: https://cdn.example.com/assets/index.css

Step 2: Run Sync Command

lovrabet menu sync

Step 3: Follow the Prompts

1. Select menus to sync (CLI will automatically compare local and online, list differences)
2. Enter JS resource link (HTTPS, ending with .js)
3. Enter CSS resource link (HTTPS, ending with .css)
4. Done, menus are automatically created

  Menu Name       Local  Online
  Dashboard       ✓      ✓     (exists, skip)
  User Profile    ✓      ✗     (needs creation)
  Order List      ✓      ✗     (needs creation)

* Please select menus to sync:
  [✓] User Profile
  [✓] Order List

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

√ Menu creation complete

How to Set Menu Names?

CLI will automatically extract menu names from your page code. Title comment is recommended:

/**
 * Title: User Profile
 */
export default function UserProfile() {
  return <div>User Profile Page</div>;
}

Menu name will display as: User Profile

Priority Rules

Title comment (recommended) > displayName > component name > file path

Method	Example	Menu Name
Title comment	/** Title: User Profile */	User Profile
displayName	Component.displayName = "User Profile"	User Profile
Component name	export default function UserProfile()	UserProfile
File path	src/pages/user/profile.tsx	user/profile

Best Practice

Add Title: Menu Name at the top of each page file for clear and readable menu names.

Update Synced Menu Resources

When you iterate development and rebuild, resource file addresses will change (e.g., index-abc123.js → index-def456.js).

You'll need to batch update resource links for synced menus:

lovrabet menu update

Use Case

First Release                    After Iteration
index-v1.0.js  ─── sync ───►   Menu created
                                    │
index-v1.1.js  ─── update ──►  Update resource links

Workflow

# 1. Rebuild
lovrabet build

# 2. Deploy to CDN, get new resource links
# https://cdn.example.com/assets/index-v1.1.js
# https://cdn.example.com/assets/index-v1.1.css

# 3. Batch update menu resources
lovrabet menu update

CLI will prompt you to enter new JS/CSS links, then batch update all synced menus:

* New JS Link: https://cdn.example.com/assets/index-v1.1.js
* New CSS Link: https://cdn.example.com/assets/index-v1.1.css

√ Updated resource links for 3 menus

sync vs update

Command	Purpose
menu sync	First sync, create new menus
menu update	Iteration update, update resource links for existing menus

FAQ

Why are CDN links required?

The Lovrabet workspace loads your frontend code in the browser, so it requires publicly accessible HTTPS links.

What if I don't have a CDN?

You can use:

• Alibaba Cloud/Tencent Cloud OSS
• Your own server (requires HTTPS configuration)
• Hosting services like Vercel/Netlify

Do I need to sync again after updating code?

• New pages added: Need menu sync to create new menus
• Modified existing page code: After rebuilding and deploying, use menu update to batch update resource links
• Modified menu names: Need to manually modify in Lovrabet admin panel, or delete and re-sync

Menu showing English component names?

This means Title comment is not set. Add at the very top of the page file:

/**
 * Title: Your desired menu name
 */

---

Complete Example

Project structure:

src/pages/
├── dashboard.tsx        # Title: Dashboard
├── user/
│   └── profile.tsx      # Title: User Profile
└── orders/
    └── list.tsx         # Title: Order List

Workflow:

# 1. Build
lovrabet build

# 2. Deploy to CDN (assuming you get these links)
# https://cdn.myapp.com/v1/index.js
# https://cdn.myapp.com/v1/index.css

# 3. Sync menus
lovrabet menu sync

# 4. Enter JS/CSS links as prompted, done

Result: "Dashboard", "User Profile", and "Order List" menu items appear in the Lovrabet workspace menu.