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

• Join me and invest commission-free with Freetrade. Get started with a free share worth £3-£200. magic.freetrade.io/join/asrin/447192e9
• Want to start a blog on hashnode use this link so I get a free shirt. I will assist you with setup 🙂
• Sign up for coinbase and get £7.42 of Bitcoin coinbase.com/join/dayana_m40?src=android-link

Credits

• Magento 2 / Adobe Commerce
• Magento Dev Docs

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

Happy Coding 🙂

Az 👨🏾‍💻