Skip to main content

Sync Menu to Workspace

About This Guide

This guide 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 you develop custom pages with Rabetbase, you need to "mount" them 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 backend, create menus one by one, configure paths, resource links...

With this command: One-click scan of local pages, automatic menu creation.

Prerequisites​

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

How to Use​

Step 1: Build and Deploy Project​

# Build project
lovrabet build   # or npm run build

# Deploy to CDN, get resource links
# For example: https://cdn.example.com/assets/index.js
# For 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 automatically compares local and online, lists differences)
  2. Enter JS resource link (HTTPS, ending in .js)
  3. Enter CSS resource link (HTTPS, ending in .css)
  4. Complete, menus automatically created
  Menu Name       Local  Online
  Dashboard       ✓      ✓     (already 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 automatically extracts menu names from your page code. Recommend using Title comments:

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

The menu name will be displayed as: User Profile

Priority Rules​

Title comment (recommended) > displayName > component name > file path
MethodExampleMenu Name
Title comment/** Title: User Profile */User Profile
displayNameComponent.displayName = "User Profile"User Profile
Component nameexport default function UserProfile()UserProfile
File pathsrc/pages/user/profile.tsxuser/profile
Best Practice

Add Title: Chinese Name at the top of each page so menu names are clear and easy to understand.

Update Synced Menu Resources​

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

At this point you need to batch update resource links for synced menus:

lovrabet menu update

Usage Scenarios​

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

Operation Flow​

# 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​

CommandPurpose
menu syncFirst-time sync, create new menus
menu updateIteration update, update resource links for existing menus

Common Issues​

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

What If I Don't Have a CDN?​

You can use:

  • Alibaba Cloud/Tencent Cloud OSS
  • Your own server (needs HTTPS configured)
  • Vercel/Netlify and other hosting services

Do I Need to Re-sync After Updating Code?​

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

This indicates no Title comment is set. Add at the very top of the page file:

/**
 * Title: Your desired Chinese name
 */

Complete Example​

Project Structure:

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

Operation Flow:

# 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: Three menu items "Dashboard", "User Profile", "Order List" appear in the Lovrabet workspace menu.