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:
- Create CSV file in
app/i18n/with locale code - Format:
locale_Code.csv(e.g.,fr_FR.csv) - Fill in original and translated strings
- Run
php bin/magento setup:static-content:deployto 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:
- Theme translations (highest priority)
- Module translations
- Global translations (app/i18n/)
- Database translations
Quiz
1. Where do custom Magento modules live?
2. What file registers a custom theme?
3. Where are environment-specific settings stored?
Flashcards
Question
What is the path for a custom module?
Click to reveal answer
Answer
app/code/{Vendor}/{Module}/
Question
What file contains the list of enabled modules?
Click to reveal answer
Answer
app/etc/config.php
Question
What CSV format do translation files use?
Click to reveal answer
Answer
"Original String","Translated String"
Question
Where do theme-specific template overrides go?
Click to reveal answer
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)