Magento 2 Directory and File Structure: A Kick-Ass Explanation

43

Hi guys,

Today, I keep on providing a detailed explanation about Magento 2 Directory Structure and File Structure. This helps developers figure out how these structures work, develop Magento extensions and themes, and customize code effectively.

Magento 2 Directory Structure

As mentioned in the previous article on Magento 2 Installation, there is a Magento 2 directory structure after you finish installing. Let’s take a look at this structure in the following image:

I will explain each folder in detail so that you can get a better understanding of this structure.

app/

By default, there are 3 sub-directories included in this app folder such as design, i18n, etc.

You can create the app/code directory which contains all custom modules.

You also had better store your custom store theme in the app/design/frontend directory and store admin themes in the app/design/adminhtml directory.

To store language packages, the app/i18n directory is your need to help you create a multi-language store.

After installing Magento 2, you cannot see the app/code directory because it is not a default folder. Magento core modules are stored in the vendor directory to prevent the mixture between custom modules and Magento core modules in their Git repo. In case your packages are installed via Composer, they are stored in the vendor/. I don’t recommend you follow this way because your changes are overridden when you upgrade the Magento application.

bin/

The Magento CLI executable script which activates Magento commands is included in this directory. They can be used to clear cache, reindex, upgrade, and so on.

dev/

This directory includes automated functional tests that the Magento Test Framework runs.

generated/

This directory contains all of Magento’s generated code.

lib/

The lib/ directory contains all Magento and vendor library files and non-module based Magento code. This is mostly a system code that aid Magento to run.

phpserver/

The Router.php file which is used to implement the PHP built-in server is stored in this folder. I don’t recommend this file because it contains tons of potentially big security holes.

pub/

An index.php file used to run the application in production mode and generated static files of your Magento theme are included in the pub/ directory. This directory provides a security measure in which public access to the root directory asset is restricted.

setup/

It includes Magento’s installation setup files.

var/

This folder contains raw cache files, logs, sessions, and reports.

vendor/

This directory contains the framework core. You can store additional modules in this directory in case you install Magento 2 via Composer. It includes different packages defined under the composer.json file.

Module File Structure

Below is a typical Magento 2 file structure for module:

Common directories

• Block: includes module block classes
• Controller: includes module controller classes
• etc: including configuration files; in particular, module.xml (required).
• Model: includes models and module resources.
• Setup: includes classes for module database structure and data setup which are invoked when installing or upgrading.

Additional directories

You can insert additional Magento 2 folders for configuration and other ancillary functions such as plugin, localization, and layout files.

• Api: includes PHP classes exposed to the API.
• Console: includes CLI commands.
• Cron: includes cron job definitions.
• CustomerData: includes section files.
• Helper: includes aggregated functionality.
• i18n: includes localization files.
• Observer: includes files to execute commands from the listener.
• Plugin: includes any needed plugins.
• UI: includes data generation files.
• view: includes view files such as static view files, design templates, email templates, and layout files.
• ViewModel: includes PHP model classes as part of a model-view-viewmodel (MVVM) implementation

*Note: The names of the folders are set by convention but not required, if you do not set them as above, the code will run normally

>>> Explore More: What is Plugin in Magento 2?

Theme File Structure

Theme directory (Vendor_name/theme_name)

Example: create a new theme with full name Bss/market in the directory below.

app/design/frontend/

After creating a new theme already, our new theme will have a directory structure: app/design/frontend/Bss/market.

In which:

+ Bss is equivalent to Vendor_name

+ market is equivalent to theme_name.

Next, take a look at a typical theme file structure for Magento 2 in the following:

<theme_dir>/ (EX: app/design/frontend/Bss/market)
├── modules/ 
│	├── web/
│	│	├── css/
│	│	│	├── source/
│	│	├── js/
│	│	├── images/
│	├── layout/
│	├── templates/
├── etc/ 
├── i18n/ 
├── media/
├── web/
│	├── css/
│	│	├── source/ 
│	├── fonts/
│	├── images/
│	├── js/
├── registration.php 
├── theme.xml

Another example of more detailed file theme structure in Magento 2:

Common directories

+ Directory <Modules> (app/design/frontend/Bss/market/<Modules>): this directory is your module name, third- party module name or module name of Magento. Each module will correspond to block and pages on the website.

Example: Your module name is Bss_Megamenu or the module name of Magento is Magento_Catalog.

+ In directory <modules> will contain these directories.

• web – Contains the CSS, JS and image files used to control the visual styling of <modules>.
• layout – Contains the layout files (ex: catalog_product_view.xml).
• templates – Contains the Template files (phtml).

+ etc (app/design/frontend/Bss/market/etc): contain the view.xml file, this is directory and file is not mandatory (if your theme has been extended from the parent theme and you don’t have any changes of config in this file). Basically, the file (view.xml) contains these configs for the width and height of images showing on the frontend.

+ i18n (app/design/frontend/Bss/market/i18n): this directory will contain the translated files of <modules> (CSV) (this directory is not required when your theme does not support multilanguage).

+ media (app/design/frontend/Bss/market/media): Theme preview images (screen capture of your theme) can be put here.

+ web (app/design/frontend/Bss/market/web): Optional directory that contains static files organized into the following subdirectories:

• css/source: includes a 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 variable values.
• css/source/lib: includes 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.

Declare the Magento 2 Theme Structure Configuration

File theme.xml: this file is in the path of theme directory which is created as above.

app/design/frontend/Bss/market/theme.xml

In which: theme.xml file will define your theme name, also define the parent theme for it (in case if you need to extend your theme from any parent theme)

File registration.php: this file will the same level as the theme.xml file.

app/design/frontend/Bss/market/registration.php

In which: This file will be responsible for registering your theme with the website system.

So only with two simple files above, you have declared the theme in Magento 2.

Language Package File Structure

This is a typical directory structure for three language packages:

The top-level directory is a required directory for a language package. Besides, the directory name should be matched with the ISO code to detect the locale.

>>> Ready to expand your store’s global reach? Learn how to set up a multi-language store in Magento 2 with ease! Follow this step-by-step guide to configure multiple store views, apply language packs, and optimize for international customers.

Conclusion

I hope this ultimate Magento 2 tutorial article about Magento 2 directory structure benefits all of you in your work when you need to build an extension, create a theme, or make some code customization. If you have any questions, feel free to contact BSS Commerce or share your feedback in the comment section.