Skip to main content

5-Minute Quick Start: Create Your First Project

This is a step-by-step guide from zero to one. Follow along and you will complete your first integration development project.

Why can AI build a project from scratch for you?

Without rabetbase, building a CRM from scratch is not just about "writing frontend code." You need to: scaffold a frontend project (React + routing + state management), scaffold a backend project (Spring Boot / Laravel / Express + database connections + ORM), write API endpoints (one for each CRUD operation), implement authentication (JWT? Session? Cookie?), configure CORS, perform frontend-backend integration (align field names, data formats, error codes), deploy the frontend to CDN, deploy the backend to a server (buy machines, set up environments, configure nginx/apache, add SSL, set up process managers). After all that, you still have not started writing business logic. A full-stack developer spends 3 weeks and is still debugging the login endpoint.

With rabetbase: a single rabetbase project create command generates a standard project structure with routing, SDK client, TypeScript types, micro-frontend lifecycle hooks, and build configuration all in place. BaaS provides the database, API, SDK, authentication, and enterprise-grade permissions -- no backend code needed. api pull generates a type-safe SDK, and menu sync registers pages into the main application menu. No backend scaffolding, no servers to buy, no CORS configuration, no frontend-backend integration. In 10 minutes, your project is running, querying data, and integrated into the main system.

Just Tell the AI​

In Claude Code, enter:

Use rabetbase CLI to create a CRM project from scratch, install dependencies, pull API configuration, then create a customer list page that displays customer name, phone, company, and status, reading data from the customer dataset.

What the AI Will Do​

The AI will use rabetbase CLI to automatically complete the following:

  1. Install and log in to the CLI (rabetbase auth login)
  2. Create a project and install dependencies (rabetbase project create)
  3. Pull API configuration (rabetbase api pull)
  4. Generate a customer list page component
  5. Start the development server (rabetbase run start)

Once complete, open http://localhost:5173 in your browser to see the page. Below are the complete manual steps.

Manual Setup (Complete Steps)

Before You Begin​

Prerequisites
  1. You have created an application project in the Lovrabet Workspace
  2. You have completed automatic app generation by connecting a database or describing requirements

Step 1: Install the CLI and Login​

Current Version: npm version

# Install CLI globally (only needed once)
npm install -g @lovrabet/rabetbase-cli@latest

# Login to your Lovrabet account
rabetbase auth login

After running rabetbase auth login, the browser will automatically open the login page. Once logged in, the CLI will remember your identity.

Verify Installation

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

Step 2: Create a Project​

rabetbase project create

The CLI will guide you through filling in project information:

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

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

🎉 Project created successfully!

  cd my-crm
  rabetbase run start

You can find your AppCode on the application settings page in the Lovrabet Workspace.

Step 3: Start the Development Server​

cd my-crm
rabetbase run start

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

Step 4: Write a Page​

Create your first page in the src/pages/ directory:

// src/pages/dashboard.tsx

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

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

  useEffect(() => {
    lovrabetClient.models.orders
      .filter({
        pageSize: 100,
      })
      .then((res) => {
        setData(res.tableData);
      });
  }, []);

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

Note the Title: Data Dashboard comment at the top -- when syncing menus, the CLI will automatically extract it as the menu name.

Step 5: Build and Deploy​

rabetbase run build

Build artifacts are in the dist/ directory, containing two files: index.js and index.css. Deploy them to your CDN or server and obtain HTTPS links:

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

Step 6: Sync Menus to Workspace​

rabetbase menu sync

The CLI will automatically scan your local pages, compare them with existing menus in the workspace, and prompt you to select which pages to sync:

  Menu Name      Local  Remote
  Data Dashboard ✓      ✗      (needs creation)

* Select menus to sync:
  [✓] Data Dashboard

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

√ Menu created successfully

Now open the Lovrabet Workspace and you will see "Data Dashboard" in the menu.

Subsequent Iterations​

After modifying code and rebuilding, the resource file URLs may change. Use the following command to batch-update resource links for synced menus:

rabetbase menu update

Complete Workflow Summary​

1. Install CLI          npm install -g @lovrabet/rabetbase-cli@latest
2. Login                rabetbase auth login
3. Create project       rabetbase project create
4. Develop & debug      rabetbase run start
5. Build                rabetbase run build
6. Deploy to CDN        (upload dist/ files)
7. Sync menus           rabetbase menu sync
8. Subsequent updates   rabetbase menu update

Frequently Asked Questions​

Q: How do I get my AppCode?

You can find it in Lovrabet Workspace - App Settings - Basic Info.

Q: What if I do not have a CDN?

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

Q: How do I fetch page data?

Use the auto-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​