Tutorial: Hello World - Spryker Commerce OS

Last updated:
Edit on GitHub

This tutorial is also available on the Spryker Training website. For more information and hands-on exercises, visit the Spryker Training website.

Challenge description

Show the Hello World! string on a web page on your browser. To do so, build a new module called HelloWorld.

Build the HelloWorld module

The steps described in this procedure describe how to build a new module. To add the HelloWorld module, do the following:

  1. Go to /src/Pyz/Yves/ and add a new module called HelloWorld.

A new module is simply a new folder.

  1. Add a new controller for the module:
    1. In HelloWorld, add a new folder called Controller.
    2. Add the controller class called IndexController:
<?php

namespace Pyz\Yves\HelloWorld\Controller;

use Spryker\Yves\Kernel\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;

class IndexController extends AbstractController
{
	/**
    * @param Request $request
	*
	* @return \Spryker\Yves\Kernel\View\View
	*/
	public function indexAction(Request $request)
		{
			$data = ['helloWorld' => 'Hello World!'];

			return $this->view(
				$data,
				[],
				'@HelloWorld/views/index/index.twig'
			);
		}
}
  1. Add the route to the controller:
    1. In HelloWorld, add a new folder called Plugin.
    2. In Plugin, add a folder called Provider.
    3. Add your RouteProviderPlugin class with the name HelloWorldRouteProviderPlugin:
<?php

namespace Pyz\Yves\HelloWorld\Plugin\Provider;

use Spryker\Yves\Router\Plugin\RouteProvider\AbstractRouteProviderPlugin;
use Spryker\Yves\Router\Route\RouteCollection;

class HelloWorldRouteProviderPlugin extends AbstractRouteProviderPlugin
{
	protected const ROUTE_HELLO_WORLD = 'hello-world';

	/**
	 * @param \Spryker\Yves\Router\Route\RouteCollection $routeCollection
         *
         * @return \Spryker\Yves\Router\Route\RouteCollection
         */
        public function addRoutes(RouteCollection $routeCollection): RouteCollection
        {
            $route = $this->buildRoute('/hello-world', 'HelloWorld', 'Index', 'indexAction');
            $routeCollection->add(static::ROUTE_HELLO_WORLD, $route);

            return $routeCollection;
        }
}
  1. In the application, register RouteProviderPlugin, so the application knows about your controller action.
  2. In the Router module, go to RouterDependencyProvider::getRouteProvider() method and add HelloWorldRouteProviderPlugin to the array.
  3. Add the twig file to render your Hello World page.
  4. In HelloWorld, add the Theme/default/views/index folder structure.

This folder structure reflects your theme and controller names. Default is the theme name, and index is the controller name. For every action, there is a template with the same name.

As your action is called index, add a twig file for your action called index.twig:

{% extends template('page-layout-main') %}

	{% define data = {
	helloWorld: _view.helloWorld
	} %}

	{% block content %}
		<div><h2>{{ data.helloWorld }}</h2></div>
	{% endblock %}
  1. Open the new page http://www.de.suite.local/hello-world.