Skip to main content

5-Minute Quick Start

This is a complete tutorial that takes you from zero to creating a Lovrabet project. The entire process takes about 5-10 minutes.

Prerequisites​

  1. Lovrabet CLI installed: Complete installation according to the Installation Guide
  2. Windows users recommendation: Git Bash is strongly recommended as the command-line terminal
    • Fully tested in Git Bash with the best experience
    • CMD/PowerShell only has basic compatibility and may encounter some issues
    • How to open: Right-click on a folder → Select "Git Bash Here"

Confirm your environment: Run lovrabet --help in terminal. If you see help information, your environment is ready.

Installation Demo

Step 1: Create a Project​

Enter the following command in terminal:

lovrabet create

The CLI will guide you through project creation, just follow the prompts:

Create Project Demo

1. Enter Project Name​

* Project name: my-app
  Press Enter to confirm, or enter a custom name
  • Default name: my-app (press Enter to use)
  • Custom name: Enter your desired project name, e.g., my-awesome-app
  • Naming rules: Only letters, numbers, hyphens - and underscores _, must start with a letter or number

2. Bind Application AppCode (Optional)​

* Application AppCode [optional]:
  Binding AppCode can auto-configure API, e.g., app-c4c89304 (press Enter to skip)
  • What is AppCode? A unique identifier assigned by the backend system for your project, usually in the format app-xxxxxxxx
  • How to get it? Ask your backend colleagues or check in the backend admin system
  • Skip: Press Enter, can configure later with lovrabet config set appcode <code>

3. Login Authentication (If API Pull is Needed)​

If you entered an AppCode, the CLI will check login status:

  • Already logged in: Shows √ Valid login state detected
  • Not logged in: Asks * Do you want to login first to pull API configuration?

Selection Recommendations:

  • Choose Yes - Recommended, automatically pulls API configuration, saves manual work later
  • Choose No - Skip login, need to manually configure API after project creation

Login Process:

  1. CLI starts a local server
  2. Automatically opens browser to login page
  3. Enter username and password in browser to complete login
  4. Return to terminal to continue creation process

Windows User Tips:

  • Browser may not open automatically, manually copy the link shown in terminal to browser
  • Browser may show "insecure connection" warning, click "Advanced" then select "Continue"

4. Pull API Configuration (If Logged In)​

After successful login, CLI will ask:

* Do you want to automatically pull API configuration?
  ▶ Yes  No
  Use ←→ to select, Enter to confirm
  Recommended to choose Yes for automatic API configuration

Selection Recommendations:

  • Choose Yes - Recommended, automatically generates API code, ready to use
  • Choose No - Skip, can manually pull later with lovrabet api pull

5. Automatic Project Creation​

After confirming the above options, CLI will automatically:

  1. ✅ Copy project files (from official template)
  2. ✅ Update project configuration (package.json)
  3. ✅ Install npm dependencies
  4. ✅ Format code (Prettier)
  5. ✅ Create configuration file (.lovrabetrc)
  6. ✅ Pull API configuration (if Yes was selected)

Method 2: Direct Creation (Fast)​

If you already know the project name, you can specify it directly:

lovrabet create my-app

This method skips the interactive guide and directly creates a project named my-app, but won't auto-configure AppCode and pull API.

Step 2: Start the Project​

After creation, enter the project directory and start the development server:

cd my-app
lovrabet start

What happens after starting?

  1. Starts Vite development server
  2. Automatically opens browser
  3. Browser auto-refreshes after code changes (hot reload)

Step 3: Configure API (If Not Configured During Creation)​

If you skipped AppCode configuration during project creation, you can manually configure it later:

1. Set AppCode​

lovrabet config set appcode <your-app-code>

For example:

lovrabet config set appcode app-c4c89304

2. Pull API Configuration​

lovrabet api pull

CLI will ask what name to save the API files with, press Enter to use the default name api.

3. Generated Files​

After completion, you'll see in the src/api/ directory:

  • src/api/api.ts - Contains all API interface definitions
  • src/api/client.ts - Pre-configured client, ready to use

4. How to Use API​

In your React components or other TS/JS files:

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

// Example: Call API to get data
const data = await lovrabetClient.someApiMethod();

Step 4: Add New Pages​

If you want to add new pages to your project:

lovrabet add page

Interactive Process​

  1. Select page template:

    • blank - Blank page, only basic structure
    • hello-world - Example page with content and styles

  2. Enter route path:

    • Single-level route: about → Creates src/pages/about/
    • Multi-level route: user/profile → Creates src/pages/user/profile/

Step 5: Build and Preview​

Build Production Code​

lovrabet build

Generated static files will be saved in the dist/ directory.

Preview Build Results Locally​

lovrabet preview

Starts a local server to preview the packaged results.

Live Build and Preview​

lovrabet preview --watch

Monitors file changes, automatically rebuilds and previews.

🎉 Congratulations!​

You've successfully completed the entire process from project creation to local development.

What's Next?​

FAQ​

1. Will login state expire?​

Yes, login information is saved in a local file (~/.lovrabet/cookie), may need to re-login after a long period of inactivity.

2. Can I add API configuration later if I skipped it during project creation?​

Yes, use the following commands:

lovrabet config set appcode <your-app-code>
lovrabet api pull

3. How to view current project configuration?​

lovrabet config list

4. Is the project template fixed?​

Yes, currently uses the official unified template (React + Vite + TypeScript).