Magento 2 Areas vs Modules

In this article, we will talk about Magento 2 Areas and Modules.

What is an Area in Magento 2?

An area can be understood as a logical component that can help you organizes code in order to optimize the processing of the request. Areas are usually used to streamline web service calls. This can be done by loading only the dependent code for a particular area. Each of the default areas which are defined by Magento can include totally different code for process URLs and requests. For instance, when you invoke a REST web service call, you can identify a separate area that loads the code that its scope is limited to answering REST calls.

6 Magento area types

1. Magento Admin: adminhtml

index.php or pub/index.php is the entry point for the adminhtml area. All the code which are needed for managing the store will be included in this Admin panel area. If you want to view all the code for components which you will see while working in the Admin panel, you can access the /app/design/adminhtml directory.

2. Storefront: frontend

The entry point for the Storefront area is index.php or pub/index.php. To define your storefront appearance, you can find the template and layout files in this area.

3. Basic: base

You can use Basic as a replacement for files which are absent in adminhtml and frontend areas.

4. Cron: crontab

The crontab area will always be loaded by the \Magento\Framework\App\Cron class in cron.php

5. Web API REST

To entry the Web API REST (webapi_rest) area, you can find its entry point which is index.php or pub/index.php. This area has a front controller which can understand the way to do URL lookups for REST-based URLs.

6. Web API SOAP: webapi_soap

The entry point for the Web API SOAP area is index.php or pub/index.php.

In addition, it’s essential to diffirentiate all these types of Magento 2 areas. It’s not only for you to understand correctly each type of areas but also helpful to identify some files from Basic (base) that can be used in admnhtml and frontend. Learning each type of areas to address the differences between them is what you can do next. But remember one thing they have in common is their structure.

How areas and modules working together?

Areas vs modules

The resources that are visible and accessible in an area and the area’s behavior will be defined by Modules. Several areas can be influenced by the same module. For example, parts of the RMA module will be represented in the adminhtml and the frontend area.

If your module works in different areas, make sure that it needs to have individual behavior and view components for each area.

Each of the areas will declare itself in a module. Besides, all the resources for an area will also be located in the same module.

Moreover, you also have the ability to enable or disable an area within a module. Once a module has been enabled, it would inject the routers of an area into the general routing process of application. On the contrary, of the module is disabled, the area’s routers will not be loaded. Consequently, an area’s resources and specific functionality will not be available.

Facts:

Other areas of modules should not influence modules.
When you disable an area, it will not lead to the modules related to that area is disabled.
Areas will be registered in the file called Dependency Injection framework di.xml.

Example of frontend area

In this guide, we will show you how to create a frontend theme as frontend area.

Theme Folder structure

app/design/frontend/mageplaza/
├── ultimate/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

Create a app/design/frontend/mageplaza/theme.xml file like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
  <title>Mageplaza Ultimate</title>
  <parent>Magento/blank</parent>
</theme>

Declare your theme

Now we have folder app/design/frontend/mageplaza/ultimate , now create a file named theme.xml that define basic information about theme such as: Name, parent theme (in case your theme inherits from an existing theme), preview image

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Mageplaza Ultimate</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Create Register file

You can add the following content to registration.php the theme to Magento 2

File: app/design/frontend/mageplaza/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mageplaza/ultimate',
    __DIR__
);