Skip to main content

CLI Introduction

Welcome to Lovrabet CLI! This is a command-line tool designed specifically for frontend developers, enabling you to quickly create projects, generate pages, and configure development environments with a single command.

Think of it like Vue CLI or Create React App, but specifically tailored for Lovrabet projects.

Basic Information​

  • Package Name: @lovrabet/cli
  • Command Name: lovrabet
  • Current Version: v1.2.0+ (Major Update)
  • Node.js Version: Requires 20 or above (latest LTS recommended)
  • Supported Systems: macOS, Linux, Windows
  • Windows Users Note: Git Bash is strongly recommended; CMD/PowerShell only has basic compatibility
  • Primary Purpose: Help you quickly scaffold projects, generate pages, and connect backend APIs

Video Tutorial​

Quick overview of using Lovrabet CLI:

Main Features​

🚀 Project Management​

  • Create New Projects: Generate complete frontend project structure with a single command
  • Install Dependencies: Automatically install npm packages without manual operations
  • Code Formatting: Automatically configure Prettier to keep code clean

📄 Page Development​

  • Quickly Generate Pages: Select templates (blank or example pages), enter routes to generate page files
  • Route Configuration: Supports multi-level routes, e.g., user/profile creates src/pages/user/profile/ directory

🔧 Development Tools​

  • Local Development: Start development server with one command (based on Vite)
  • Project Build: Package production code
  • Preview Functionality: Preview production version locally with hot reload support

🔐 Login Authentication​

  • One-Click Login: Open browser to complete login, automatically save login state
  • Automatic Management: Login information saved locally, no need to re-login next time

🌐 API Integration​

  • Auto-Generate: Pull API configuration from backend, generate frontend calling code
  • Type Safety: Generate TypeScript type definitions to reduce errors
  • Client Wrapper: Provide unified API calling methods
  • Model Aliases v1.2.0+: Support configuring friendly model aliases

🆕 v1.2.0 New Features​

SDK Version Compatibility Check​

Automatically checks the @lovrabet/sdk version in your project at startup, displays upgrade prompt if below 1.2.0.

Model Configuration Array Format​

Generated API configuration uses datasetCode as the core identifier, with optional alias:

// Generated api.ts (v1.2.0+)
export const LOVRABET_MODELS_CONFIG = {
  appCode: 'my-app',
  models: [
    {
      datasetCode: '8d2dcbae08b54bdd84c00be558ed48df',
      tableName: 'users',
      alias: 'users',      // Optional: Model alias (syntactic sugar)
      name: 'User Management',
    },
  ],
} as const;

// Standard way (recommended) - globally unique, AI-friendly
const users = client.models.dataset_8d2dcbae08b54bdd84c00be558ed48df.filter();

// Alias way (syntactic sugar) - human-readable, functionally identical
const users = client.models.users.filter();

Unified Type Definitions​

Added centralized type definition modules, improving code maintainability.

Getting Started​

If this is your first time, we recommend reading in this order:

  1. Installation Guide - Install the CLI tool
  2. Quick Start - Create your first project in 5 minutes
  3. Command Reference - Detailed explanation of all available commands

Required Reading for Windows Users:

Complete Documentation Directory​

Basic Usage​

Advanced Features​

Tools and Help​