Skip to main content

Tutorial Guide & Project Creation

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

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

What Are We Building?​

We will build a Customer Management System from scratch with the following features:

FeatureDescriptionWhat You Will Learn
Customer ListDisplay customer data with filtering and paginationBasic SDK queries
Customer DetailClick to view detailed customer informationData association queries
Add CustomerFill in a form and save to the databaseData creation
Edit CustomerModify existing customer informationData update
Sales ReportAggregate customer sales dataCustom 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: Core 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: Transactional Processing for Orders & Order Items](./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 of Invalid Data](./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 you begin, make sure you have the following:

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

AppCode is your app's unique identifier on the Lovrabet platform. You can find it in Lovrabet Workspace - App Settings - Basic Info, in a format like app-c4c89304.

1.2 Install the CLI Tool​

The CLI (command-line tool) helps you quickly create projects, generate code, and deploy.

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

# Install CLI
npm install -g @lovrabet/rabetbase-cli@latest

# Verify installation
rabetbase --version

If you see the version number, the installation was successful.

1.3 Login to Your Account​

rabetbase auth login

This will automatically open your browser to log in to your Lovrabet account. After a successful login, the terminal will display:

✔ Login successful! Credentials saved locally

Future CLI commands will automatically use this login state.

1.4 Create a Project​

# Create project
rabetbase project 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
  rabetbase run start
What does pulling API config do?

The CLI automatically fetches all dataset information for your app from the platform and generates SDK code. This way, your IDE can autocomplete field names and types as you write code.

1.5 Start the Development Server​

cd customer-management
rabetbase run start

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

If you use Cursor or Claude Code, installing the Rabetbase Skill allows AI to understand your business data and generate more accurate code.

# Install Rabetbase Skill (global install, only once)
npx skills add lovrabet/rabetbase --global

After installation, the AI assistant will automatically recognize the rabetbase command and can directly help you perform data queries, code generation, and more.

Benefits of Installing the Skill
  • AI can automatically retrieve your table structure
  • Generated code has 100% accurate field names
  • Complex queries (JOINs, aggregations) can be written by AI
  • 3-5x development efficiency boost

Phase 1 Complete!​

You have now:

  • Installed the CLI tool
  • Created a project
  • Started the development server
  • Configured AI assistance (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 have finished all feature development, you can build and deploy to production.

11.1 Build the Project​

rabetbase run build

After the build completes, the dist/ directory will contain two files:

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

11.2 Upload to CDN​

Upload these two files to your CDN or server and obtain 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 (HTTPS required), or free hosting services like Vercel or Netlify.

11.3 Set Menu Names (Important)​

Before syncing menus, make sure your pages have correct display names. The CLI extracts menu names using the following priority:

displayName > Component Name > File Path

Recommended: Use displayName

function CustomerList() {
  // ...
}

// Set the 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-time deployment, use the sync command to create menus:

rabetbase 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 the Lovrabet Workspace and you will see your developed pages in the menu.

11.5 Subsequent Iterative Updates​

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

# 1. Rebuild
rabetbase run 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
rabetbase 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 have 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 to Learn Next​

Deep Dive​

Architecture & Deployment​

Other Resources​