Skip to content
beginner Phase 19 · Magento Directory Structure

Magento 2 app/ Directory

Deep dive into app/code, app/design, app/etc, and app/i18n directories.

45m
0 problems
Topic Progress 0%

app/code/ - Custom Modules

The app/code/ directory contains all custom modules not installed via Composer.

Module directory structure:

app/code/Vendor/Module/
├── registration.php           # Module registration
├── etc/                       # Configuration files
│   ├── module.xml             # Module declaration
│   ├── di.xml                 # Global DI config
│   ├── events.xml             # Event observers
│   ├── routes.xml             # Route definitions
│   ├── crontab.xml            # Cron jobs
│   ├── webapi.xml             # REST API routes
│   └── frontend/
│       ├── di.xml             # Frontend DI config
│       ├── routes.xml         # Frontend routes
│       └── layout.xml         # Layout declarations
├── Api/                       # Service contracts
│   ├── Data/
│   │   └── ItemInterface.php
│   └── ItemRepositoryInterface.php
├── Block/                     # View blocks
│   └── Item.php
├── Controller/                # Request handlers
│   ├── Index/
│   │   └── Index.php
│   └── Adminhtml/
│       └── Item/
│           └── Index.php
├── Model/                     # Business logic
│   ├── Item.php
│   ├── ResourceModel/
│   │   └── Item.php
│   └── ResourceModel/
│       └── Item/
│           └── Collection.php
├── Observer/                  # Event observers
│   └── ItemSave.php
├── Plugin/                    # Interceptors
│   └── ProductAfterSave.php
├── Setup/                     # Database installers
│   ├── InstallSchema.php
│   ├── UpgradeSchema.php
│   ├── InstallData.php
│   └── UpgradeData.php
├── Cron/                      # Scheduled tasks
│   └── Cleanup.php
├── Service/                   # Business services
│   └── ItemService.php
├── view/                      # Frontend assets
│   ├── frontend/
│   │   ├── layout/
│   │   ├── templates/
│   │   ├── web/
│   │   │   ├── css/
│   │   │   ├── js/
│   │   │   └── images/
│   │   └── requirejs-config.js
│   └── adminhtml/
│       ├── layout/
│       ├── templates/
│       └── ui_component/
└── i18n/                      # Translations
    ├── en_US.csv
    └── fr_FR.csv

Creating a new module:

# Create directory structure
mkdir -p app/code/Vendor/Module/etc
mkdir -p app/code/Vendor/Module/Model
mkdir -p app/code/Vendor/Module/Block
mkdir -p app/code/Vendor/Module/Controller/Index

registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

app/design/ - Custom Themes

The app/design/ directory contains custom themes for the frontend and admin areas.

Theme directory structure:

app/design/
├── frontend/
│   └── Vendor/
│       └── custom_theme/
│           ├── registration.php
│           ├── theme.xml
│           ├── media/
│           │   └── preview.png
│           ├── etc/
│           │   └── view.xml
│           ├── web/
│           │   ├── css/
│           │   │   └── source/
│           │   ├── js/
│           │   ├── images/
│           │   └── fonts/
│           ├── Magento_Catalog/
│           │   ├── templates/
│           │   ├── layout/
│           │   └── web/
│           ├── Magento_Checkout/
│           │   └── ...
│           └── i18n/
│               ├── en_US.csv
│               └── fr_FR.csv
└── adminhtml/
    └── Vendor/
        └── admin_theme/
            ├── registration.php
            ├── theme.xml
            └── web/

Theme registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Vendor/custom_theme',
    __DIR__
);

theme.xml:

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom Theme</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Module-specific overrides:
Directories named after modules (e.g., Magento_Catalog/) contain template and layout overrides for that specific module.

app/etc/ - Configuration Files

The app/etc/ directory contains core application configuration files.

Key configuration files:

env.php - Environment configuration:

<?php
return [
    'db' => [
        'table_prefix' => '',
        'connection' => [
            'default' => [
                'host' => 'localhost',
                'dbname' => 'magento',
                'username' => 'root',
                'password' => '',
                'model' => 'mysql4',
                'engine' => 'innodb',
                'initStatements' => 'SET NAMES utf8;',
                'active' => '1',
            ]
        ]
    ],
    'crypt' => [
        'key' => 'your-encryption-key-here',
    ],
    'session' => [
        'save' => 'files',
    ],
    'cache' => [
        'frontend' => [
            'default' => [
                'backend' => 'Magento\\Framework\\Cache\\Backend\\File',
            ]
        ]
    ],
    'install' => [
        'date' => '2024-01-15 10:00:00',
    ]
];

config.php - Enabled modules:

<?php
return [
    'modules' => [
        'Magento_Catalog' => 1,
        'Magento_Customer' => 1,
        'Vendor_Module' => 1,
        'Magento_SomeDisabled' => 0,
    ]
];

Deployment configuration:
Magento merges config.php and env.php during deployment. In production, these can be split into separate files per environment.

app/i18n/ - Translation Files

The app/i18n/ directory contains translation CSV files for Magento strings.

Translation file format:

"Original String","Translated String"
"Add to Cart","Ajouter au panier"
"My Account","Mon Compte"
"Home Page","Page d'accueil"

CSV structure:

  • Column 1: Original English string (with context)
  • Column 2: Translated string for the locale
  • Optional Column 3: Comment for translators

Locale file naming:

app/i18n/
├── en_US.csv              # English (US)
├── fr_FR.csv              # French (France)
├── de_DE.csv              # German (Germany)
├── es_ES.csv              # Spanish (Spain)
└── vendor_module-fr_FR.csv # Module-specific translations

Translation context (module prefix):

"Magento_Catalog::Product","Produit"
"Magento_Customer::Customer","Client"
"Vendor_Module::Custom String","String Personnalisee"

Adding custom translations:

  1. Create CSV file in app/i18n/ with locale code
  2. Format: locale_Code.csv (e.g., fr_FR.csv)
  3. Fill in original and translated strings
  4. Run php bin/magento setup:static-content:deploy to compile

Theme-specific translations:
Place translation CSV files in your theme's i18n/ directory for theme-specific overrides.

Module translations:
Module-specific translations can go in the module's view/{area}/i18n/ directory.

Translation priority:

  1. Theme translations (highest priority)
  2. Module translations
  3. Global translations (app/i18n/)
  4. Database translations

Quiz

1. Where do custom Magento modules live?

Question 1 options

2. What file registers a custom theme?

Question 2 options

3. Where are environment-specific settings stored?

Question 3 options

Flashcards

Question

What is the path for a custom module?

Answer

app/code/{Vendor}/{Module}/

Question

What file contains the list of enabled modules?

Answer

app/etc/config.php

Question

What CSV format do translation files use?

Answer

"Original String","Translated String"

Question

Where do theme-specific template overrides go?

Answer

app/design/frontend/{Vendor}/{Theme}/{ModuleName}/templates/

Revision Notes

Key Takeaways

  • 1. app/code/ contains custom modules in {Vendor}/{Module} structure
  • 2. app/design/ contains frontend and admin themes
  • 3. app/etc/ holds configuration (env.php, config.php)
  • 4. app/i18n/ contains translation CSV files
  • 5. Module-specific layout/template overrides go in theme's {Module}/ directories
  • 6. Registration uses ComponentRegistrar for modules and themes

Interview Tips

  • List the contents of app/code and explain module structure
  • Describe how custom themes are organized in app/design
  • Explain the purpose of app/etc/ configuration files
  • Discuss how translations work in app/i18n/
  • Know the difference between env.php and config.php

Cheat Sheet

app/ Directory Cheat Sheet

app/code/ - Custom modules

{Vendor}/{Module}/
├── registration.php
├── etc/
├── Model/
├── Block/
├── Controller/
├── view/
└── i18n/

app/design/ - Custom themes

frontend/{Vendor}/{Theme}/
├── registration.php
├── theme.xml
├── etc/view.xml
└── {Module}/templates/

app/etc/ - Configuration

  • env.php - Database, cache, sessions
  • config.php - Enabled modules

app/i18n/ - Translations

  • {locale}.csv (e.g., fr_FR.csv)