Setting up the playground

To get a better understanding of the frontend area, we are going to build a very lightweight Magelicious_Jsco module, to serve as a playground for our JS component exploration.

To this point, we should already be pretty familiar with the flow of creating a new module. Assuming we have defined our basic registration.php, composer.json, and etc/module.xml files, we can start dealing with the specifics of our Magelicious_Jsco module.

Let's start by defining <MODULE_DIR>/etc/frontend/routes.xml, as follows:

<config>
    <router id="standard">
        <route id="jsco" frontName="jsco">
            <module name="Magelicious_Jsco"/>
        </route>
    </router>
</config>

We then create <MODULE_DIR>/Controller/Playground.php, as follows:

namespace MageliciousJscoController;
abstract class Playground extends MagentoFrameworkAppActionAction
{
}

We then create <MODULE_DIR>/Controller/Playground/Index.php, as follows:

namespace MageliciousJscoControllerPlayground;
use MagentoFrameworkControllerResultFactory;
class Index extends MageliciousJscoControllerPlayground
{
    public function execute() {
        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
        $resultPage->getConfig()->getTitle()->set(__('Playground'));
        return $resultPage;
    }
}

There's nothing really new to this point. We have merely created a route, controller, and controller action to support a page that we can access via the URL, such as http://magelicious.loc/jsco/playground. But the page itself is defined via XML layout, and we further create <MODULE_DIR>/view/frontend/layout/jsco_playground_index.xml, as follows:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="empty"
 xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceContainer name="content">
      <block class="MageliciousJscoBlockTest"
           name="jsco_test"
           template="Magelicious_Jsco::playground.phtml">
      </block>
    </referenceContainer>
  </body>
</page>

Note layout="empty" he

re; this is to limit ourselves to a nearly empty page to work with.

Finally, we create an empty <MODULE_DIR>view/frontend/templates/playground.phtml page. If we were to now open a link, such as http://magelicious.loc/jsco/playground, that would open a page with the Playground title shown. playground.phtml is where all of our sample code will go in, as we continue exploring this chapter.

Table of Contents for Setting up the playground

Create new playlist

Sign In

Sign Up

Table of Contents for
Setting up the playground