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 writing from scratch.

Value of This Feature​

Imagine creating a new page the traditional way requires:

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

Now just one command, all done 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​

  • Use case: You already 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​

  • Use case: Beginners learning or need reference examples
  • 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 with hyphens: user-center, order-history
  • Clear multi-level paths: user/profile, admin/user/list

Generation Process Explained​

1️⃣ Select Template​

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

2️⃣ Enter Route Path​

The CLI asks for the route path of this page, such as user/profile.

3️⃣ Generate Files​

The 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​

The 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 go through a complete example to see how to use it:

Example 1: Create User Profile Page​

$ lovrabet add page
❓ Please select a 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 a 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 the page is created, you can:

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

Common Issues​

Issue 1: Generated Page Route Cannot Be Accessed​

Possible cause: Project routing configuration doesn't include dynamic routing.

Solution: Check the project routing configuration file to ensure it supports dynamic route matching.

Issue 2: Want to Modify Page Templates​

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

  1. Check the templates directory in the 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!