Create a frontend page in Magento 2

Create a frontend page in Magento 2

Steps on how to create a front end page in Magento 2 / Adobe Commerce

Below are steps to how I created a front-end page using a controller in Magento 2.

Create a module

  • Create folders and paths as this example. Replace AzCodez\Page with your module.

    • app\code\AzCodez\Page\Controller\Action\Index.php
  • In Index.php add the below code.

    • This class creates a page and sets page contents to 'Hello From Custom Page'
    • Replace AzCodez\Page with your module.
 * Render page
namespace AzCodez\Page\Controller\Action;

use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\ResultInterface;

 * Class Index
 * @package AzCodez\Page\Controller\Action
class Index extends Action

     * @var PageFactory
     protected $_pageFactory;

     * Index constructor.
     * @param Context $context
     * @param PageFactory $pageFactory
     public function construct(
        Context $context,
        PageFactory $pageFactory
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);

     * @return ResultInterface
     public function execute()
        $result = $this->resultFactory->create(\Magento\Framework\Controller\ResultFactory::TYPE_RAW);
        $result->setContents('Hello From AzCodez Custom Page');
        return $result;

  • Create a route to route the page to the frontend. Replace AzCodez\Page with your module.

    • This is the file path app\code\AzCodez\Page\etc\frontend\routes.xml
  • Add code for route. Replace AzCodez_Page with your module name

    <?xml version="1.0"?>
    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
      <router id="standard">
          <route id="product_list" frontName="product_list">
              <module name="AzCodez_Page" />
  • Run deploy commands

  • If not running docker remove docker-compose run --rm deploy magento-command and replace with php bin/magento

    rm -rf generated/code/* && 
    rm -rf pub/static/frontend/* && 
    rm -rf pub/static/adminhtml/* && 
    docker-compose run --rm deploy magento-command setup:upgrade && 
    docker-compose run --rm deploy magento-command setup:di:compile && 
    docker-compose run --rm deploy cloud-deploy && 
    docker-compose run --rm deploy magento-command cache:clean && 
    docker-compose run --rm deploy magento-command cache:flush
  • Load the page magento2.docker/product_list/action/index

Shameless Plugs


Feel free to comment if you get stuck or have questions or feedback✌️

Happy Coding 🙂

Az 👨🏾‍💻

Did you find this article valuable?

Support Asrin Dayananda by becoming a sponsor. Any amount is appreciated!