Magento 2 Directory Structure – Overview of Directory Structure

In this blog post, we will be learning Magento 2 directory structure, Particularly we will go through the Magento 2 installation (root) directory structure, Magento 2 module directory structure, Magento 2 theme directory structure. Knowledge of how Magento 2 modules and themes directories are structured is helpful in becoming a better Magento 2 Developer.

Magento 2 install Directory Structure

The number of files and directories come as part of fresh installation of Magento 2 Application is quite overwhelming. Not all files are required for development. Moreover, not all files are required to develop Magento 2 themes or modules.

After you have successfully installed Magento 2 Application. Magento 2 install directory contains app, bin, setup, phpserver, var, generated, lib, pub, dev directories and other files . Let’s go through the directories present in the install directory in Magento 2. We are going through what each directory does.

If you open Magento 2 install directory you will find list of directories similar to the screenshot below.

Magento2.4 fresh installation folder list
The folders which will be present in the root directory of Magento 2.4 version after installation:

Directories in Magento 2.4 after installation

Below are the directories which will be present by default in Magento 2.4 install directory after installation:

  • app directory – app directory recommended for the development of Magento components. It consists of code, design, i18n directories.
  • bin directory – bin directory contains Magento (CLI) executable files
  • dev directory – dev directory contains Magento 2 test scripts and a few tools for development .
  • generated directory – Inside the generated directory Magento’s generated code is stored. In the default setting, if the class is injected in a constructor, the code will be generated by Magento to create non-existent factory classes.
  • lib directory – lib directory contains all of Magento and vendor library files. 
  • phpserver directory – phpserver directory contains the Router.php file which can be used to implement the PHP built-in server..
  • pub directory – pub directory contains an index.php file. We can use this index.php file to run the application in production mode. pub folder also includes your Magento theme generated static files. pub contains the following directories, errors , media, static, 
  • setup directory – setup directory contains all files which are related to Magento’s installation setup.
  • var directory – var directory contains generated classes, sessions, cache, database backups, and cached error reports.
  • vendor directory – vendor directory contains  the core of the framework. Here is where additional modules can be installed. All operations with this directory are made through the composer.

The app directory

The /app directory is responsible for storing all configuration files, any custom themes or module needs installed in a Magento 2 Application. The following directories are present within the /app directory with the module:

Magento2.4 fresh installation folder list
The folders which will be present in the dev directory of Magento 2.4 after installation:
  • code – The /app/code/ directory will be missing after a clean install of Magento 2. If you’re developing your own module or if you want to continue development of an existing module you add your files to /app/code/<vendor>/<module-name> directory and the required directories within it.

All Magento 2 core modules are in the /vendor directory in order to avoid the mixing of your custom modules with the Magento core modules. Extending the modules under /app/code/ is highly recommended.

  • design – The /app/design/frontend directory should be used to the custom store themes, while the /app/design/adminhtml directory should be used to store all your Admin themes.
  • etc – The /app/etc directory contains all default configuration settings for a Magento 2 application. The /app/etc directory contains the following files:
    • env.php – The env.php file contains database connection settings including the name database to which Magento 2 application is connected and its username and password of the database. The env.php also contains cache related settings and other settings.
    • di.xml – The di.xml file configures which dependencies need to be injected by the object manager. You can also specify sensitive configuration settings using di.xml file provides crucial information about dependency injection.
    • config.php – The config.php file which provides all available Magento 2 modules which are available for a Magento 2 Application. Each module has a active/disabled status allowing Magento 2 to include a module’s functionality.
  • i18n – The app/i18n directory stores language packages. You will use this folder if you want to create a multi-language store to suit your business needs. In Magento 2 a language package is a collection of translation dictionaries for a particular language along with meta-information. You can also distribute language packages to other merchants if you wish. 

The bin directory

The /bin directory contains the Magento CLI executable script. This script activates Magento commands that help in clearing cache, reindexing etc. The /bin directory provides a Magento CLI (Command Line Interface) tool. It provides an interface via CLI to different Magento 2 commands to perform changes in Magento 2 application.

The dev directory

The /dev directory holds all tests which come together with Magento 2 application.

The dev directory which will be present in Magento 2.4 after installation:

Magento 2 includes 8 different types of tests inside /dev/tests directory. Each of the directory includes tests of a particular type and additional code which helps to execute tests.

The /dev/tools directory provides different tools and its configuration such as Grunt and other non-commonly used files.

The generated directory

The /generated directory stores all of Magento’s generated code. Magento 2 relies on PHP code generation. By default, Magento 2 generates code to create non-existent factory classes if the class is injected in a constructor.

The lib directory

The /lib directory includes /internal and /web directories. The /internal directory is not something we are going to work with. And the /web directory provides frontend or web related files. It includes JavaScript 3rd-party libraries such as jQuery, KnockoutJS, RequireJS and other libraries. Also the /web includes CSS/LESS files as well as UI documentation.

The phpserver directory

The /phpserver directory contains the Router.php file whose main purpose is to implement the PHP built-in server. Working with this file is discouraged to use the Router.php file as part of Magento 2 production configuration. Because it has tons of potentially big security holes.

The pub directory

The /pub directory should be set as your web root on the server you use (Apache, Nginx). As the /pub directory provides you a security measure which can restrict the public access to the assets in Magento 2 install directory.

Besides, The /pub directory also includes your Magento theme generated static files. The index.php is a primary file responsible for processing HTTP requests. There is static.php file which responsible for processing all JavaScript, CSS and HTML files and finding the files in the /pub/static directory.

The /pub directory contains the following sub directories:

  • /pub/errors directory contains error logs.
  • /pub/media directory stores all media content which is going to be uploaded whether via Magento Admin or some programmatically.
  • /pub/static directory contains generated files of Magento themes. This directory can indicate web root in nginx config Magento.
Magento 2 pub folder

The setup directory

The /setup directory is used to provide a Web Setup Wizard and other setup related scripts. Usually, this is not a directory we are going to work with.

Magento 2 setup folder

The var directory

The /var directory contains contains all temporary files and also generated classes, sessions, cache, database backups, and cached error reports.
The /var/cache directory contains the cache files of front Magento pages.
The /var/log directory stores Magento 2 log files mostly are exception.log and system.log files.
The /var/report directory contains the Magento error files, which call the 503 page, as well as API request errors.
The /var/session directory contains the session files.
The /var/view_preprocessed directory contains the generated theme files.

Magento 2 var folder

The vendor directory

The /vendor directory which contains the framework core.  This directory includes all 3rd-party dependencies installed. It also include Magento 2 source files under the /vendor/magento directory. We are going to look into the directory quite often during development. The /vendor directory is generated by composer using composer.json file.

Introduction to Modules in Magento 2

A Module in Magento 2 is an independent component or a set of components that provide business logic and features. Magento 2 is a modular application and it supports modularity. It means that all functionality is implemented and delivered in components that are known as Modules. A Component is also known and called an Extension. A module and an extension is basically the same thing.

Magento 2 Module Directory Structure

In Magento 2 modules can be located in /app/code directory and /vendor directory. The app/code directory is used to add all custom and 3rd-party Magento 2 modules. Magento 2 built-in Modules will be located under the /vendor directory is used during the composer package management installation.

Required files for Magento 2 Modules

All the Magento 2 modules requires the following files:

  • registration.php: This is the file which will register your module with Magento. In this file, the module’s root directory name is used as the module name. Therefore, by default, modules are installed in the <Magento install directory>/vendor directory.
  • etc/module.xml: This is the file which defines the basic information about the module, for example, module dependencies and version number. The version number will be used to determine which schema and data in order to update when you execute php bin/magento setup:upgrade command.
  • composer.json: This is the file which defines the dependencies that the module will need at runtime.

Common directories for Magento 2 Modules

Following are some common module directories:

  • Block – The Block directory contains PHP view classes as part of Model View Controller(MVC) vertical implementation of module logic.
  • Controller – The Controller directory contains PHP Controller class as part of MVC vertical implementation of module logic.
  • etc – The etc directory contains configuration files; in particular, module.xml, which is required.
  • Model – The Model directory contains PHP model classes as part of MVC vertical implementation of module logic.
  • Setup – The Setup directory contains classes for module database structure and data setup which are invoked when installing or upgrading.
  • ViewModel – The ViewModel directory contains PHP model classes as part of a model-view-viewmodel (MVVM) implementation. 

Additional directories for Magento 2 Modules

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

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

Magento 2 Theme Design Basics

Magento 2 Storefront themes are located in app/design/frontend/<Vendor>/. Magento built-in themes can be located under vendor/magento/theme-frontend-<theme_code> when a Magento 2 instance is deployed from the Composer repository.

Themes in Magento are divided into frontend (responsible for the front end part) and adminhtml (responsible for the admin part of the site).

Magento 2 Theme Directory Structure

The following directories and files can be located within the Magento 2 theme file structure:

  • <vendor_name>/
    • <theme_name>/
      • web/
        • css/
          • source
        • layout/
          • override
        • templates/
      • etc/
      • i18n/
      • media/
      • web/
        • css/
          • source/
        • fonts/
        • images/
        • js/
    • composer.json
    • registration.php
    • theme.xml

Common directories for Magento 2 Themes

The structure of a Magento 2 theme directory typically would be like following:

  • 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 Magento 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.

Theme files

All the Magento 2 themes files fall into the following two categories:

  • Static view files
  • Dynamic view files

Static view files

A set of theme files that are returned by the server to a browser as is, without any processing, are called the static view files of a theme.

Static view files can be located in a theme directory as follows:

  • <vendor_name>/
    • <theme_name>/
      • media/
      • web/
        • css/ (except the "source" sub-directory)
        • fonts/
        • images/
        • js/

The key difference between static files and other theme files is that static files appear on a web page as references to the files, while other theme files take part in the page generation, but are not explicitly referenced on a web page as files. Static view files that can be accessed by a direct link from the storefront, are distinguished as public theme files.

Dynamic view files

Dynamic view files that are processed or executed by the server in order to provide result to the client. These are: .less files, templates, and layouts.

Dynamic view files are located in a theme directory as follows:

  • <vendor_name>/
    • <theme_name>/
      • web/
        • css/
          • source/
      • layout/
        • override/
      • templates/
      • web/
        • css/
          • source/

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top