Skip to main content

5-Minute Quick Start Guide

This is a "from 0 to 1" operation manual that walks you through completing your first integration development project.

Prerequisites​

info
  1. You have already created a Lovrabet application project in the Lovrabet Workbench
  2. You have completed automatic application generation by connecting an existing database, or completed basic application functionality generation through requirements description

Step 1: Install CLI and Login​

# Install CLI tool (global installation, only needed once)
npm install -g @lovrabet/cli

# Login to your Lovrabet account
lovrabet auth

After executing lovrabet auth, it will automatically open your browser for login. After successful login, the CLI will remember your identity.

Verify Installation

Run lovrabet --version to check the version number and confirm successful installation.

Step 2: Create Project​

lovrabet create

The CLI will guide you through filling in:

* Project name: my-crm
* Application AppCode [optional]: app-c4c89304

✔ Copy project files
✔ Update project configuration
✔ Install npm dependencies
✔ Pull API configuration

🎉 Project created successfully!

  cd my-crm
  lovrabet start

Where to find AppCode? You can find it in the application settings page of the Lovrabet Workbench.

Step 3: Start Development Server​

cd my-crm
lovrabet start

The browser will automatically open http://localhost:5173, and you can see the project's initial page.

Step 4: Write Your Page​

Create a page file in the src/pages/ directory:

// src/pages/dashboard.tsx

/**
 * Title: Dashboard
 */
import { useEffect, useState } from "react";
import { lovrabetClient } from "../api/client";

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Use SDK to fetch data
    lovrabetClient.models.orders
      .filter({
        pageSize: 100,
      })
      .then((res) => {
        setData(res.tableData);
      });
  }, []);

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Total {data.length} orders</p>
      {/* Your custom UI */}
    </div>
  );
}
Menu Name

Note the Title: Dashboard comment at the top, which will be automatically extracted as the menu name when syncing menus.

Step 5: Build and Deploy​

# Build production version
lovrabet build

Build artifacts are in the dist/ directory, including:

  • index.js - Main script file
  • index.css - Style file

Deploy these two files to your CDN or server, and get HTTPS links:

  • https://cdn.example.com/assets/index.js
  • https://cdn.example.com/assets/index.css

Step 6: Sync Menu to Workbench​

lovrabet menu sync

The CLI will:

  1. Scan all pages in your local project
  2. Compare with existing menus in the Lovrabet Workbench
  3. Prompt you to select pages to sync
  4. Ask you to enter JS/CSS CDN links
  Menu Name     Local  Online
  Dashboard     ✓      ✗     (needs creation)

* Select menus to sync:
  [✓] Dashboard

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

√ Menu created successfully

Now open the Lovrabet Workbench, and you'll see "Dashboard" in the menu!

Subsequent Iterations: Update Resources​

When you modify code and rebuild, the resource file addresses will change (e.g., index-v1.js → index-v2.js).

Use the following command to batch update resource links for synced menus:

lovrabet menu update

Complete Workflow Diagram​

┌─────────────────────────────────────────────────────────────┐
│  1. Install CLI          npm install -g @lovrabet/cli      │
│  2. Login                lovrabet auth                      │
│  3. Create project       lovrabet create                    │
│  4. Develop and debug    lovrabet start                     │
│  5. Build                lovrabet build                     │
│  6. Deploy to CDN        (upload dist/ files)               │
│  7. Sync menu            lovrabet menu sync                 │
│  8. Subsequent updates   lovrabet menu update               │
└─────────────────────────────────────────────────────────────┘

FAQs​

Q: How to get AppCode?​

You can find it in Lovrabet Workbench → Application Settings → Basic Information.

Q: What if I don't have a CDN?​

You can use:

  • Alibaba Cloud/Tencent Cloud OSS
  • Your own server (HTTPS configuration required)
  • Free hosting services like Vercel/Netlify

Q: How to fetch page data?​

Use the automatically generated SDK client in your project:

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

// Query data
const result = await lovrabetClient.models.customers.filter({
  where: { status: { $eq: "active" } },
  pageSize: 20,
});

// Create data
await lovrabetClient.models.customers.create({
  name: "Zhang San",
  phone: "13800138000",
});

Next Steps​