Skip to main content

Tutorial Guide & Project Setup

Who Is This Tutorial For?
  • You're new to the Lovrabet ecosystem
  • You want to do custom development but don't know where to start
  • You want a step-by-step complete example
What Will You Learn?
  • Master the complete development process: from project creation to deployment
  • Build a customer management module independently (list, detail, form, report)
  • Understand how tools (CLI, SDK, MCP, SQL) work together

Estimated Learning Time: 60-90 minutes (can be done in sections)

What Will We Build?​

We'll build a Customer Management System from scratch with these features:

FeatureDescriptionWhat You'll Learn
Customer ListDisplay customer data with filtering and paginationSDK basic queries
Customer DetailView customer details on clickData association queries
Add CustomerForm submission, save to databaseData creation
Edit CustomerModify existing customer infoData update
Sales ReportCustomer sales statisticsCustom SQL
Data ValidationValidate data before savingBackend Function

Final Result: A complete business module ready for production use.

Learning Path​

📦 Phase 1: Preparation (10 min)
   └── [1. Environment Setup & Project Creation](#1-environment-setup--project-creation)

📦 Phase 2: Basic Features (30 min)
   ├── [2. List Page: Pagination & Filtering](./scenario-data-list)
   ├── [3. Detail Page: View & Edit Data](./scenario-data-detail)
   └── [4. Form Page: Create & Update Data](./scenario-data-form)

📦 Phase 3: Advanced Features (30 min)
   ├── [5. Master-Detail Form: Order & Order Items Transaction](./scenario-master-detail)
   ├── [6. Join Query: Display Customer Info in Orders](./scenario-multi-table)
   └── [7. Report Page: Sales Statistics with SQL](./scenario-data-report)

📦 Phase 4: Expert Features (20 min)
   ├── [8. Data Validation: Backend Interception](./scenario-bf-pre-validation)
   ├── [9. Data Masking: Phone & ID Card Processing](./scenario-bf-post-validation)
   └── [10. Complex Statistics: SQL in Backend Function](./scenario-bf-sql)

📦 Phase 5: Deployment (10 min)
   └── [11. Build & Deploy](#11-build--deploy)

1. Environment Setup & Project Creation​

1.1 Prerequisites​

Before starting, make sure you have:

RequirementDetailsHow to Get
Node.jsVersion >= 18Download
Code EditorVS Code recommendedDownload
Lovrabet AccountRegisteredSign Up
App AppCodeApp createdGet from workspace after creating an app
What is AppCode?

AppCode is your app's unique identifier on the Lovrabet platform. Find it in Lovrabet Workspace → App Settings → Basic Info. Format is like app-c4c89304.

1.2 Install CLI Tool​

The CLI (Command Line Interface) helps you quickly create projects, generate code, and deploy.

Open your terminal (PowerShell or Git Bash for Windows users) and run:

# Install CLI
npm install -g @lovrabet/cli

# Verify installation
lovrabet --version

Seeing the version number means installation was successful.

1.3 Login to Your Account​

lovrabet auth

This will automatically open your browser for login. After successful login, your terminal will show:

✔ Login successful! Credentials saved locally

Future CLI commands will automatically use this login state.

1.4 Create Project​

# Create project
lovrabet create

The CLI will ask you a few questions:

* Project name: customer-management
* App AppCode [optional]: app-c4c89304  ← Enter your AppCode
* Auto-pull API config? ▶ Yes   ← Select Yes

✔ Copying project files
✔ Updating project config
✔ Installing npm dependencies
✔ Pulling API config

🎉 Project created successfully!

  cd customer-management
  lovrabet start
What does pulling API config do?

The CLI automatically fetches all your app's dataset info from the platform and generates SDK code. This gives you IDE autocomplete for field names and types.

1.5 Start Development Server​

cd customer-management
lovrabet start

Your browser will automatically open http://localhost:5173 showing the initial project page.

If you use Cursor or Claude Desktop, configuring MCP lets AI understand your business data for more accurate code generation.

Create .cursor/mcp.json in your project root (for Cursor) or edit Claude Desktop config:

{
  "mcpServers": {
    "lovrabet-dataset": {
      "command": "npx",
      "args": ["-y", "@lovrabet/dataset-mcp-server"],
      "env": {
        "LOVRABET_APP_CODE": "app-c4c89304"
      }
    }
  }
}
Benefits of MCP Configuration
  • AI automatically gets your table structure
  • Generated code has 100% accurate field names
  • Complex queries (JOINs, aggregations) done by AI
  • 3-5x development efficiency boost

Phase 1 Complete!​

You now have:

  • ✅ CLI tool installed
  • ✅ Project created
  • ✅ Development server running
  • ✅ AI assistance configured (optional)

Next Step: Start building the Customer List Page - the most fundamental feature and your starting point for learning the development workflow.

11. Build & Deploy​

When you've completed all feature development, you can build and deploy to production.

11.1 Build Project​

lovrabet build

After building, the dist/ directory will contain two files:

dist/
├── index.js      # JavaScript code
└── index.css     # Styles

11.2 Upload to CDN​

Upload these two files to your CDN or server and get HTTPS URLs:

  • https://cdn.example.com/customer-management/index.js
  • https://cdn.example.com/customer-management/index.css
No CDN?

You can use Alibaba Cloud OSS, Tencent Cloud COS, your own server (with HTTPS), or free hosting services like Vercel or Netlify.

11.3 Set Menu Names (Important)​

Before syncing menus, ensure your pages have correct display names. CLI extracts menu names by this priority:

displayName > Component Name > File Path

Recommended: Use displayName

function CustomerList() {
  // ...
}

// Set menu display name
CustomerList.displayName = "Customer List";

export default CustomerList;

Arrow Function Style:

const CustomerList = () => {
  // ...
};

CustomerList.displayName = "Customer List";
export default CustomerList;
MethodExampleMenu Name
displayName (Recommended)Component.displayName = "Customer List"Customer List
Component Namefunction CustomerList()CustomerList
File Pathsrc/pages/customer/list.tsxcustomer/list

11.4 Sync Menus to Workspace​

For first deployment, use the sync command to create menus:

lovrabet menu sync

The CLI will scan your local pages and let you select which menus to sync:

  Menu Name       Local  Remote
  Customer List   ✓      ✗      (needs creation)
  Customer Detail ✓      ✗      (needs creation)
  Sales Report    ✓      ✗      (needs creation)

* Select menus to sync:
  [✓] Customer List
  [✓] Customer Detail
  [✓] Sales Report

* JS URL: https://cdn.example.com/customer-management/index.js
* CSS URL: https://cdn.example.com/customer-management/index.css

√ Menus created successfully

Now open Lovrabet Workspace and you'll see your developed pages in the menu!

11.5 Iterative Updates​

After modifying code and redeploying, use the update command to batch update resource URLs:

# 1. Rebuild
lovrabet build

# 2. Upload to CDN (get new URLs)
# https://cdn.example.com/customer-management/index-v2.js
# https://cdn.example.com/customer-management/index-v2.css

# 3. Batch update all menu resource URLs
lovrabet menu update

sync vs update​

CommandPurposeUse Case
menu syncCreate new menusFirst deployment, adding new pages
menu updateUpdate resource URLsRedeploying after code changes
Detailed Documentation

Congratulations!​

You've completed the full learning journey from zero to one, mastering:

SkillDescription
CLI UsageCreate projects, build, deploy, menu sync
SDK Queriesfilter, getOne, create, update
Custom SQLComplex reports, statistical analysis
Backend FunctionData validation, business logic
AI-Assisted DevelopmentConfigure MCP for AI to understand your business

What's Next?​

Deep Dive​

Architecture & Deployment​

Other Resources​