Skip to main content

Page Templates

When you need to add new pages to your project, Lovrabet CLI can help you quickly generate page files without starting from scratch.

Value of This Feature​

Imagine the traditional way of creating a new page requires:

  1. Creating file directories
  2. Creating React component files
  3. Writing basic component structure
  4. Configuring routes
  5. Adding style files
  6. Possibly other configurations...

Now just one command does it all automatically!

How to Use​

Run the following command:

lovrabet add page

The CLI will then guide you step by step through the configuration.

Available Templates​

Currently two page templates are provided:

📄 blank - Blank Page​

  • Suitable for: You have a clear page design and want to start from scratch
  • Includes:
    • Basic React component structure
    • Simple CSS module file
    • Basic page title

👋 hello-world - Example Page​

  • Suitable for: Beginners learning or need a reference example
  • Includes:
    • Complete page layout example
    • Basic interaction logic
    • Common component usage examples
    • Style design reference

Route Path Rules​

When entering route paths, follow these rules:

✅ Correct Examples​

about                    # About page
contact                  # Contact page
user/profile             # User profile
user/settings            # User settings
admin/dashboard          # Admin dashboard
shop/product/detail      # Product detail page
user-center              # Using hyphens
api_docs                 # Using underscores

❌ Incorrect Examples​

/about                   # Cannot start with /
about/                   # Cannot end with /
user//profile            # Cannot contain consecutive //
user profile             # Cannot contain spaces
user@profile             # Cannot contain special characters
中文页面                  # Chinese names not supported

Naming Recommendations​

  • Lowercase words: about, contact
  • Multiple words use hyphens: user-center, order-history
  • Multi-level paths clear: user/profile, admin/user/list

Generation Process Explained​

1️⃣ Select Template​

CLI asks which template you want to use, you can choose blank or hello-world.

2️⃣ Enter Route Path​

CLI asks for the route path for this page, e.g., user/profile.

3️⃣ Generate Files​

CLI will:

  1. Create corresponding directory structure under src/pages/
  2. Copy template files to target directory
  3. Automatically replace placeholders in templates

4️⃣ Placeholder Replacement​

CLI intelligently replaces placeholders in templates:

PlaceholderDescriptionExample (route: user/profile)
{ComponentName}React component nameProfile
{DisplayTitle}Page titleProfile
{PageName}Full pathuser/profile
{TemplateName}Template nameblank or hello-world
{CreatedDate}Creation date2024-09-18
{CreatedTime}Creation time14:30:25

Complete Usage Example​

Let's see how to use it through a complete example:

Example 1: Create User Profile Page​

$ lovrabet add page
❓ Please select page template:
  ◆ blank (blank page)
  ◆ hello-world (example page)

❓ Please enter route path: user/profile

✅ Page created successfully!
   File location: src/pages/user/profile/
   Access URL: http://localhost:5173/user/profile

Example 2: Create Product List Page​

$ lovrabet add page
❓ Please select page template:
  ◆ blank (blank page)
  ◆ hello-world (example page) ← Select this

❓ Please enter route path: shop/products

✅ Page created successfully!
   File location: src/pages/shop/products/
   Access URL: http://localhost:5173/shop/products

Next Steps After Generation​

After page creation, you can:

  1. Open code editor, view newly generated files under src/pages/
  2. Start development server: lovrabet start
  3. Access new page: Enter corresponding route in browser
  4. Start developing: Modify page content according to your needs

FAQ​

Issue 1: Generated page route cannot be accessed​

Possible cause: Project's route configuration doesn't include dynamic routes.

Solution: Check project's route configuration file, ensure it supports dynamic route matching.

Issue 2: Want to modify page template​

If you're not satisfied with the default page templates, you can:

  1. View the templates directory in CLI project source code
  2. Modify template files
  3. Or create custom templates

Tip: Generated pages are just a starting point, you can modify and customize them as needed!