Component file structure

Root directory

We refer to a component’s root directory as the top-level directory in which you develop component code. Typically, this directory is located in one of the following directories relative to the Magento root directory:

• Subdirectory of app (recommended.) :

  • For modules, use app/code
  • For themes, use app/design/frontend (storefront theme) or app/design/adminhtml (Magento Admin theme)
  • For language packages, use app/i18n

  You can easily set up this type of environment by cloning the Magento 2 GitHub repository. Typically, you cloned the repository if you want to to contribute code to the Magento 2 codebase.

• vendor: You get this directory structure if you used the composer create-project command to get a Magento 2 metapackage (which downloads the CE or EE code), or if you extracted a compressed Magento 2 archive.

Required files

The following are required for all components:

• registration.php: Among other things, specifies the directory in which the component is installed; by default, components install in the <Magento root dir>/vendor directory. For more information, see Component registration.
• composer.json: Specifies component dependencies. For more information, see Composer integration.

Magento 2 component file structure

The following topics discuss a typical file structure for the following components:

• Magento 2 module file structure
• Magento 2 theme file structure
• Magento 2 language package file structure

Magento 2 module file structure

A typical file structure for a Magento 2 module:

Typical directories

Typical module directories are:

• Block: contains PHP view classes as part of 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.

Additional directories

Additionally, there are directories for configuration and other ancillary functions for items like plug-ins, internationalization, and layout files.

• Api: contains any PHP classes exposed to the API.
• i18n: contains localization files.
• Plugin: contains any needed plug-ins.
• view: contains view files, including static view files, design templates, email templates, and layout files.

Magento 2 theme file structure

A typical theme file structure follows:

├── composer.json
├── etc
│   └── view.xml
├── i18n
│   └── en_US.csv
├── LICENSE_AFL.txt
├── LICENSE.txt
├── media
│   └── preview.jpg
├── registration.php
└── web
    ├── css
    │   ├── email.less
    │   ├── print.less
    │   ├── source
    │   │   ├── _actions-toolbar.less
    │   │   ├── _breadcrumbs.less
    │   │   ├── _buttons.less
    │   │   ├── components
    │   │   │   └── _modals_extend.less
    │   │   ├── _icons.less
    │   │   ├── _layout.less
    │   │   ├── _theme.less
    │   │   ├── _tooltips.less
    │   │   ├── _typography.less
    │   │   └── _variables.less
    │   ├── _styles.less
    │   ├── styles-l.less
    │   └── styles-m.less
    ├── images
    │   └── logo.svg
    └── js
        ├── navigation-menu.js
        ├── responsive.js
        └── theme.js

Typical directories

Typical theme directories are:

• etc: view.xml contains image configurations for all images and thumbnails.
• i18n: Translation dictionaries, if any.
• media: Theme preview (a screen capture of your theme).

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

  • css/source: Theme’s less configuration files that invoke mixins for global elements from the Magento UI library, and the theme.less file that overrides the default variables values.
  • css/source/lib: View files that override the UI library files stored in lib/web/css/source/lib
  • fonts: Fonts for your theme.
  • images: Static images.
  • js: JavaScript files.

├── de_de
│   ├── composer.json
│   ├── language.xml
│   ├── LICENSE_AFL.txt
│   ├── LICENSE.txt
│   └── registration.php
├── en_us
│   ├── composer.json
│   ├── language.xml
│   ├── LICENSE_AFL.txt
│   ├── LICENSE.txt
│   └── registration.php
├── pt_br
│   ├── composer.json
│   ├── language.xml
│   ├── LICENSE_AFL.txt
│   ├── LICENSE.txt
│   └── registration.php