The module name follows the Composer naming convention: vendor/module-name.
In Lightna, modules may include the -backend and -frontend suffixes.
These suffixes indicate whether a module is primarily focused on frontend or backend development.
Lightna modules are primarily frontend-oriented, so the root folder mainly contains frontend-related
folders. However, this does not restrict the inclusion of backend-related folders if needed.
The following structure is recommended:
module ├── App ├── asset ├── config ├── css ├── js ├── layout ├── override ├── template ├── composer.json ├── config.yaml ├── module.yaml ├── tailwind.yaml └── webpack.yaml
| File / Folder | Description |
|---|---|
App |
Backend-related PHP classes such as view models, indices, plugins, CLI commands, tests, and more. |
asset |
Static assets that need to be accessible from the web, such as images and fonts. |
config |
YAML configuration files. Read about configuration files here. |
css |
CSS files. |
js |
JavaScript files. |
layout |
YAML layout files to manipulate page structure. Read about layouts here. |
override |
Overrides for assets and templates from other modules, simplifying the implementation of project designs or custom themes. |
template |
.phtml templates.
Read about templates here.
|
composer.json |
Optional for project modules but allows specifying the correct PHP namespace if it differs from the module path. Ensures proper IDE support. |
config.yaml |
While it's recommended to store all configurations in the config folder,
config.yaml can be placed in the module root if the configuration is small
and needs to be accessible by both the frontend and backend area.
Read more about configuration files here.
|
module.yaml |
Required file to declare the module. Defines the module name, namespace, and dependencies. |
tailwind.yaml |
Tailwind configuration, including the declaration of entries and their content. |
webpack.yaml |
Webpack configuration, including the declaration of entries, their content, and extends. |
App FolderApp ├── Compiler ├── Console ├── Data ├── Entity ├── Index ├── Plugin ├── Query ├── Router ├── Schema ├── Storage └── Test
| File / Folder | Description |
|---|---|
Compiler |
Module compilers |
Console |
Module CLI commands |
Data |
Data Objects (view models) |
Entity |
Entity models |
Index |
Indexation code |
Plugin |
Plugins for classes from other modules |
Query |
Data querying models |
Router |
Router actions |
Schema |
Schema updates |
Storage |
Custom storage implementations |
Test |
Unit and Integration tests with corresponding subfolders |
If some folders are frequently modified by both frontend and backend developers, such as
Data, you can move them to the module root for convenience.
css foldercss ├── base │ ├── buttons.css │ ├── icons.css │ ├── typography.css │ └── utilities.css │ └── ... ├── component │ ├── layout │ ├── listing │ ├── product │ ├── collapsible.css │ ├── dropdown.css │ ├── messages.css │ ├── ... ├── page │ └── category.css │ └── ...
| Folder | Description |
|---|---|
base |
Foundational styles that apply globally across the project, such as typography, buttons, form elements, etc. |
component |
Styles for reusable components and modules. |
page |
Styles specific to individual pages or sections. |
js folderjs ├── common │ ├── ClickEventDelegator.js │ ├── ... ├── extend │ └── RequestExtend.js │ └── ... ├── listing │ └── Facets.js │ └── ... └── product └── Gallery.js └── ...
| Folder / file | Description |
|---|---|
common |
Common scripts used across the project. |
extend |
Scripts that extend or override existing functionality from other modules. Read about creating extends here. |
listing |
Scripts specific to listing pages. |
product |
Scripts specific to product pages. |
override folderoverride ├── lightna // vendor | └── lightna-engine // module name | │ └── asset │ └── magento-frontend │ │ └── asset │ │ └── template
The override folder is used to override assets and templates from other modules.
The folder structure should match the vendor and module name of the overridden files.