Skip to content

Application Structure

Overview

Each Bellini application is made up of a set of resource types visible in the Apps view. Understanding how these resources are organized helps you navigate and manage your application effectively.

When To Use This

Use this page as a reference when:

  • You want to understand what types of resources make up a Bellini application.
  • You need to organize a growing application into directories.
  • You are establishing naming and structure conventions for your team.

Application Resource Types

The Apps view displays a tree of all applications in your organization. Each application can be expanded to reveal its resources, grouped under the following categories:

Resource Description
Pages The screens of your application. Each page is accessible at a configured URL path and is edited in the Page Editor. See Pages.
Components App-scoped reusable UI elements. Edited in the Component Editor. See Components.
APIs REST or GraphQL endpoints consumed by the application. See APIs.
Services Custom reusable logic objects shared across the application.
Scripts Global JavaScript files available across the application.
Stylesheets Global CSS files applied across the application.
Assets Images, fonts, and other static files used in the application.

Organizing Application Resources with Directories

Pages, components, services, scripts, stylesheets, and assets can be organized into directories within the Apps view. Directories are purely for organizational purposes — they do not affect URL paths or any other runtime behavior.

Creating an Application Resource Directory

  1. In the Apps view, right-click a resource category (e.g. Pages, Components, Services).
  2. Select New > Directory from the context menu.
  3. A text input appears — enter the directory name and press Enter to confirm.

Directory names must be unique within their parent and may only contain alphanumeric characters, hyphens (-), and underscores (_).

Moving Application Resources into a Directory

Once a directory is created, drag and drop resources into it within the Apps view.

Application Structure Best Practices

As your application grows, consistent naming and directory structure make it easier to navigate and maintain.

Naming conventions:

  • Use kebab-case for all resource names (e.g. customer-list, order-details, billing-service).

Directory structure:

  • Organise pages and components by feature or module (e.g. a billing/ directory for all billing-related pages, and a mirrored billing/ directory under components for the components used in those pages). Mirroring the directory structure between pages and components makes it easy to determine where a component is used.
  • Place shared utilities — services, scripts, or stylesheets used across multiple features — in a utils/ or common/ directory.

Example structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Pages/
  billing/
    invoice-list
    invoice-detail
  customers/
    customer-list
    customer-detail
  common/
    not-found

Components/
  billing/
    invoice-card
    payment-form
  customers/
    customer-card
  common/
    page-header
    data-table

Services/
  common/
    date-utils
    format-utils

Helpful Resources

  • Creating an App — How to create a new application.
  • Pages — How to create and manage pages.
  • Components — Built-in and custom components.
  • APIs — How to configure and consume APIs in your application.
  • Community Q&A: Bellini Community
    Have a question? Post or search it here.