Create a Custom Frontend View in Magento 2

 Fayyaz Khattak  Updated on December 23, 2021  3 Min ReadProject structure is one of the most important differences between Magento 1 and Magento 2. To create a custom frontend view in Magento, the developer needs to understand module development, controllers, layouts, blocks, and templates. The process of creating a custom frontend view in Magento 2 is quite similar to the Magento 1.x. The major difference is the very different file structure in Magento 2.

In this blog, I will create a custom frontend view in Magento 2 and test it on a storefront. For the purpose of this blog, I assume that you have successfully installed Magento 2, either locally or on a web server.Once Magento 2 is up and running, follow this step-by-step procedure:Create and Register a New Magento 2 ModuleSetup RoutingController ActionLayout FileThe Block fileCreate the Template fileActivate the ModuleCreate and Register a New Magento 2 ModuleCreate a new module with Namespace Cloudways and Module name Newmodule. Go to app/code/Cloudways/Newmodule and create a new registration.php file. Add the following code snippet to the file. Setup RoutingThe module’s frontend routing information will be reported in routes.xml file. This file should be located in  app/code/Cloudways/Newmodule/etc/frontend and have the following code. Controller ActionCreate the file Index.php file in app/code/Cloudways/Newmodule/Controller/Index. This will be the controller action and the execute() function in index.php will be invoked when the action is called.* @var \Magento\Framework\View\Result\Page / protected $resultPageFactory; /** * @param \Magento\Framework\App\Action\Context $context / public function __construct(\Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory) { $this->resultPageFactory = $resultPageFactory; parent::__construct($context); } /** * Blog Index, shows a list of recent blog posts. * * @return \Magento\Framework\View\Result\PageFactory */ public function execute() { $resultPage = $this->resultPageFactory->create(); $resultPage->getConfig()->getTitle()->prepend(__('Custom Front View')); return $resultPage; }}Layout FileLayout file in Magento 2 is different from Magento 1’s layout file. Magento 2 uses the layout file inside the module folder, and it is named after the structure of module. A common naming style is  RouterName_ControllerName_ActionName.xml. So in this case, create the file newmodule_index_index.xml in app/code/Cloudways/Newmodule/view/frontend/layout directory. Add the following code to it The Block fileThe next important step is the creation of the block file for the module. Block file includes several logical function(s) which will be used in the template file. Create a block file in app/code/Cloudways/Newmodule/Block and name it Newmodule.php. Add the following code to itThis is custom front view.Activate the ModuleFinally, the module needs to be activated. Open up the SSH Terminal and in the root folder of Magento 2 (i.e. public_html), run the following commands.rm -rf var/di var/generation var/cache/ var/log/ var/page_cache/php bin/magento setup:upgradephp bin/magento setup:di:compilephp bin/magento cache:cleanphp bin/magento cache:flushphp bin/magento indexer:reindexCongratulations! The Magento 2 custom frontend view has been successfully created. To test it out, run the URL in the following format.http://yourdomain.com/RouterN... my case, the URL is http://magento-14846-54048-16..., and the result is following.

ConclusionThe above procedure is the shortest way of creating a custom frontend view in Magento 2. As you could see, Magento 2 offers a much easy way of creating a custom view. If you have a question or would like to contribute to the discussion, leave a comment below.