Edit in GitHubLog an issue

Create your component file structure

In this section, we go over the different file structures for component types. The Adobe Commerce or Magento Open Source application looks for the files that make up a component including configuration files in particular places inside the component file structure. Follow the predefined file structures for the component type you are developing to ensure that it works as expected.

Root directory location#

A component's root directory matches the component's name and contains all its subdirectories and files. Based on how you installed Magento, you can put your component's root directory in one of two places:

  • <Magento install directory>/app: This is the recommended location for component development. You can set up this environment by Cloning the Magento 2 GitHub repository.

    • For modules, use app/code.
    • For storefront themes, use app/design/frontend.
    • For Admin themes, use app/design/adminhtml.
    • For language packages, use app/i18n.
  • <Magento install directory>/vendor: You will find this location for installations that use the composer create-project to install the Magento 2 metapackage (which downloads the CE or EE code).

    Magento installs third-party components in the <Magento install directory>/vendor directory. But we recommend adding your components to the <Magento install directory>/app/code directory. If you add your component to the <Magento install directory>/vendor directory, Git will ignore it because Magento adds the vendor directory to the <Magento install directory>/.gitignore file.

Module file structure#

A typical file structure for a module can look like the following:

Module File Structure

Common directories#

Following are some common module directories:

  • Block: contains PHP view classes as part of Model View Controller(MVC) vertical implementation of module logic.
  • Controller: contains PHP controller classes as part of MVC vertical implementation of module logic.
  • etc: contains configuration files; in particular, module.xml, which is required.
  • Model: contains PHP model classes as part of MVC vertical implementation of module logic.
  • Setup: contains classes for module database structure and data setup which are invoked when installing or upgrading.
  • ViewModel: contains PHP model classes as part of a model-view-viewmodel (MVVM) implementation. It allows developers to offload features and business logic from block classes into separate classes that are easier to maintain, test, and reuse.

Additional directories#

Additional folders can be added for configuration and other ancillary functions for items like plugin-ins, localization, and layout files.

  • Api: contains any PHP classes exposed to the API.
  • Console: contains CLI commands. For more info, see Add CLI commands.
  • Cron: contains cron job definitions.
  • CustomerData: contains section files.
  • Helper: contains aggregated functionality.
  • i18n: contains localization files.
  • Observer: contains files for executing commands from the listener.
  • Plugin: contains any needed plug-ins.
  • UI: contains data generation files.
  • view: contains view files, including static view files, design templates, email templates, and layout files.

Theme file structure#

A typical theme file structure can look like the following:

Copied to your clipboard
1├── composer.json
2├── etc
3│   └── view.xml
4├── i18n
5│   └── en_US.csv
6├── LICENSE_AFL.txt
7├── LICENSE.txt
8├── media
9│   └── preview.jpg
10├── registration.php
11└── web
12 ├── css
13 │   ├── email.less
14 │   ├── print.less
15 │   ├── source
16 │   │   ├── _actions-toolbar.less
17 │   │   ├── _breadcrumbs.less
18 │   │   ├── _buttons.less
19 │   │   ├── components
20 │   │   │   └── _modals_extend.less
21 │   │   ├── _icons.less
22 │   │   ├── _layout.less
23 │   │   ├── _theme.less
24 │   │   ├── _tooltips.less
25 │   │   ├── _typography.less
26 │   │   └── _variables.less
27 │   ├── _styles.less
28 │   ├── styles-l.less
29 │   └── styles-m.less
30 ├── images
31 │   └── logo.svg
32 └── js
33 ├── navigation-menu.js
34 └── theme.js

Common directories#

Typical theme directories are:

  • etc: Contains configuration files such as the view.xml file which contains image configurations for all images and thumbnails.

  • i18n: Translation dictionaries, if any.

  • media: Theme preview images (screen capture of your theme) can be put in here.

  • web: Optional directory that contains static files organized into the following subdirectories:

    • css/source: Contains a theme's less configuration files that invoke mixins for global elements from the UI library, and the theme.less file that overrides the default variables values.
    • css/source/lib: Contains view files that override the UI library files stored in lib/web/css/source/lib.
    • fonts: The folder to place the different fonts for your theme.
    • images: Static images folder.
    • js: The folder for your JavaScript files.

For more details on the theme folder structure, see theme structure.

Language package file structure#

A typical directory structure for three language packages follows:

Copied to your clipboard
1├── de_DE
2│ ├── composer.json
3│ ├── language.xml
4│ ├── LICENSE_AFL.txt
5│ ├── LICENSE.txt
6│ └── registration.php
7├── en_US
8│ ├── composer.json
9│ ├── language.xml
10│ ├── LICENSE_AFL.txt
11│ ├── LICENSE.txt
12│ └── registration.php
13├── pt_BR
14│ ├── composer.json
15│ ├── language.xml
16│ ├── LICENSE_AFL.txt
17│ ├── LICENSE.txt
18│ └── registration.php

The only required directory for a language package is the top-level directory. Although not required, we recommend that the directory name match the ISO code to identify the locale.

For more information about language packages, see Translation dictionaries and language packages.

Was this helpful?
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.