Magento 2 File Structure – Folder, Module Directory Structure

Knowing and understanding the folder structure can help you quite a bit when customizing codes or installing new extensions. The Module File/Folder structure for Magento is excessively complex which is why we going to cover all high-level files/folders instead of every single one. 

1. Magento 2 File Structure

While navigating your root folder, you’ll come across the following files:

• app
• phpserver
• bin
• setup
• generated
• var
• dev
• lib
• pub
• vendor

Like in the image below.

Each individual folder is made up of subfolders that include files. Let’s go through the contents that come with each file.

app

This file consists of Magento’s main code, it contains three key sub-directories, namely:

• design 
• i18n 
• etc

Amongst all of your modules, your customer should be counted in the app/code/<CompanyName>/<ModuleName> directory. You can also find third-party module recommendations here.

• Design

The design sub-directory includes sub-folders along with LESS and CSS files. The following two are examples of subfolders included under design.

app/design/frontend 

This subdirectory is a great place to store customized store themes

app/design/adminhtml 

You can store all admin related themes here.

• i18n

The i18n sub-directory basically stores language packages. It can be helpful for anyone wanting to establish a store supporting multiple languages.

app/code 

Here is where you’ll find core codes for Magento, you can develop and edit custom Magento codes. The availability of this sub-directory is based on your installation method. If you have downloaded the GitHub repository there will be an app/code directory.

However, if you aren’t shown a code subfolder in the app folder, don’t worry, your Magento codes can be found in the vendor file. (Vendor file will be discussed in detail below). If you want to dodge any chance of custom and core modules mix up, you might want to keep all Magento core modules separately saved in the vendor directory.

Use composer to store all of your installed packages. You can save your files under app/code/<CompanyName>, rather than working straight out of this folder and avoid any unnecessary overriding while upgrading vendor files.

• etc

This subdirectory contains interface preferences and class mapping in di.xml configuration. You can find ACL, configuration, admin and admin menu in this folder.

phpserver

• router.php

This sub-directory is a file that you can employ to implement PHP to the built-in server. Please note that, it is not recommended to work in this file to avoid possibly leaving huge security gaps in your website.

bin

This directory includes the Magento file, in other words a CLI script that is executable. With this script you can easily activate certain commands such as disabling/enabling modules, disabling/enabling cache or re-indexing among others.

setup

As the name suggests, this directory consists of all files that are required during setup after installing Magento.

generated

Magneto generated codes are stored under this directory. By default, if you inject a certain class into a constructor Magento will generate a code to make non-existent factory classes.

var

In this folder you will find sessions, cache, composer_home, di, logs, database backups, view_processed, cached error reports and generated classes. You can produce the contents of various subdirectories including var/di after you run php bin/magento setup:di:compile.

• var/log

You will ordinarily find system.log and exception.log files under this sub-directory.

• var/cache

This sub-directory is there for all of Magento’s cache. To clear up cache, its recommended to use the php bin/magento cache:clean command to check out development changes.

dev

This folder holds a few tools and Magento 2 test scripts. It stores functional tests programmed to be run by Magento’s Test Framework.

lib

If you are looking for vendor or Magento library files, this file is what you need. It also has all of Magento’s non-module based codes.

pub

You might want to set this to be your web root on your server, because it basically includes all files that are publicly accessible. The pub directory contains security measures to help you restrict public access. Keep in mind that this folder includes static files generated by your Magento theme.

• Index.php

This is a controller stored under the pub directory. It can be used in production mode to run a file.  

Vendor

The framework core exists in this directory, where you will find no problem in installing additional modules. Any operations carried out in these files uses the composer.json file. The vendor file has no files or folders inside instead composer.json creates folders and files for you. Then you’ll be able to view various packages defined by composer.json.

2. Component File Structure

Now that we have covered the basics, let’s take a look at file structures and component types. Magento is designed to search for component-creating configuration files in targeted locations within the component file structure. To make sure the component type performs the correct function you have to

In order to ensure the component type works properly, you need to pursue predefined file structures.

Root Directory

Any component’s root directory will match its name and contain relevant files and sub-directories.

Based on Magento installation, a component’s root directory can be placed in either of the following two locations:

• Magento install directory/app

  Now this is a logical component development location. You can smoothly create the following environment by cloning the GitHub repository for Magento 2.

  • Apply app/code for modules
  • Apply app/design/frontend for storefront themes
  • Apply app/design/adminhtml for Admin themes
  • Apply app/i18n for language packages

• <Magento install directory>/vendor

When you install Magento 2 marketplace and have EE or CE code downloaded as well, this location will be created by the composer. You can also find this location when you extract an archived compressed Magento 2 to install Magento.

Required Files

Components require:

• registration.php

This file registers a component with Magento. Its root directory, here, will also be used as the component’s name. Hence, components will, by default, be installed in <Magento root dir>/vendor directory.

• etc/module.xml

This file’s job is to define a component’s basic information such as version numbers or component dependencies. Versions numbers are used in order to conclude which data and schemes should be updated when you run bin/magento setup:upgrade.

• composer.json

This file is needed to determine dependencies required by the component at runtime. 

3. Module file structure

You can view a typical module file structure in the image here:

Common Directories

Below are a few common module directories:

• Block

Comprises of PHP view classes module logic Model View Controller(MVC) vertical implementation

• Controller

Comprises of PHP controller classes as a fragment of module logic MVC vertical implementation

• Etc

Comprises of configuration files; specifically the module.xml, which is needed

• Model

Comprises of PHP model classes as a fragment of module logic MVC vertical implementation

• Setup

Comprises of classes for data setup and module related database structure. During install/ upgrade such data is invoked.

Additional Directories

The following folders are great for additional configurations, ancillary functions or other items like plug-ins, localization and layout files.

• API

For PHP classes open to the API

• Console

For CLI commands

• Cron

For cron job definitions

• CustomerData

For section files

• Helper

For aggregated functionality

• i18n

For files of localization

• Observer

For files that execute listener commands

• Plugin

For any required plug-ins

• UI

For files of data generation

• View

For files that consist of design templates, email templates, static view files and layout files.

4. Theme file structure

You can view a typical theme file structure in the image here:

Common Directories

Below are classic theme directories:

• Etc

Comprises of configuration files. These include the view.xml file which has image related configurations for all thumbnails and images.

• i18n

Comprises of translation dictionaries, in the event that there are any

• Media

Comprises of theme preview images

• Web

  Comprises of an optional directory. This optional directory is made up of static files systematized by the following files:

  • css/source

    The source file consists of LESS configuration files that invoke global features from Magento’s UI library. It also has a theme.less file that overrules default variables values.

  • css/source/lib

    This folder consists of files that override stored UI library files available in lib/web/css/source/lib

  • fonts

    Save various fonts to apply to your theme here

  • images

    Here you can view a number of static images

  • js

    This folder is dedicated to your JavaScript files

5. Language package file structure

This is how a directory structure would look like if you needed to operate in the French language:

The top-level directory is the only directory needed for a language pack.

Helpful Tip** to identify the locale, and increase better performance, match the directory name and ISO code.  

Conclusion

To summarize, File Structure has a supreme role in tailoring a Magento 2 website. But as long as you are aware of the functions and purpose of folders n the file structure you can be assured that your component file will operate effectively as soon as you create it.