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

Asrin Dayananda
·Feb 5, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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.
<?php
/**
 * 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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
      <router id="standard">
          <route id="product_list" frontName="product_list">
              <module name="AzCodez_Page" />
          </route>
      </router>
    </config>
    
  • 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

Credits

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!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this