Getting started with Magento 2 development

Getting started

There are a number of ways to get started with Magento 2, we advise installing Magento 2 using Composer . This provides package management and is recommended by Magento.

Understanding the structure

Changes made to your theme:

app/design/frontend///

are compiled to static files which are then severed to the browser. The static files can be seen at

pub/static/frontend//

Shortcuts

When using Magento 2 you’ll likely find yourself using a number of different command line tasks, as some tasks, such as clearing the cache and deploying static content require a number of commands we found it useful to create shell scripts to speed up the process. This can be achieved by adding following scripts to .sh files in the root bin folder. You can then run the scripts via your command line.

Two scripts we find really useful are:

Clearing cache and deploying static content

rm -rf var/cache/mage--*
rm -rf var/view_preprocessed/*
rm -rf pub/static/*
php bin/magento setup:static-content:deploy en_GB

Compiling CSS and starting the watch command

First you need to make sure your theme is added to Grunt configuration so it can be found, this can be done within dev/tools/grunt/configs/themes.js. The following commands then remove related static files, republish symlinks to the source files and compile the css using the symlinks. Finally the watch command tracks updates to the css files and reloads the page in your browser.

grunt clean
grunt exec:base
grunt less:base
grunt watch

Template hints

As with Magento 1 the useful template hints are included, these can be turned on at Stores >Settings > Configuration > Advanced > Developer > Debug > Enable Template Hints for Storefront

Viewing default themes

We find reviewing the themes that ship with Magento 2 a great way to understand exactly how it was intended to be developed with.

Magento 2 ships with 2 themes, Luma and Blank when using the zip or composer (recommended) you’d expect to see these where in the theme directory
app/design/frontend//
but in Magento 2 these are actually located in the vendor folder, therefore you can find them at vendor/magento/theme-frontend-luma and vendor/magento/theme-frontend-blank.

Editing templates (an overview of template locations)

HTML templates, such as header and footer:

app/design/frontend///Magento_Theme/templates/

Layout XML:

app/design/frontend///Magento_Theme/layout/

To extend these you can copy the basics from:

vendor/magento/moduletheme/view/frontend

There is also a root template which serves all storefront pages this is located at:

vendor/view/base/templates/root.php

This can be updated by copying across to your theme and adding to:

app/design/frontend///Magento_Theme/templates/

Adding a custom page template

Within Magento 1 adding a custom page template requires creating a custom module, fortunately the ability to do this comes as standard within Magento 2.

You can add a custom template by adding a reference within your layouts.xml:

app/design/frontend///Magento_Theme/layouts.xml

For example to add a homepage template you would add the following to layouts.xml:

Custom Homepage

Then add the corresponding XML file within your theme, for example to complete the above you would the following XML file:

app/design/frontend///Magento_Theme/page_layout/homepage.xml

Happy Magento 2 developing!