Install Grunt CLI tool globally. To do this, run the following command in a command prompt:
npm install -g grunt-cli
Install Grunt in your Magento directory. To do this, run the following commands in a command prompt:
cd <your_Magento_instance_directory>
npm install grunt --save-dev
Install (or refresh) the node.js project dependency for your Magento instance. To do this, run the following commands in a command prompt:
cd <your_Magento_instance_directory>
npm install
npm update
Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/theme.js file
If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.
Check the video for complete Magento 2 installation, creating theme, installing and configuring grunt and some debugging. Magento 2 Installation
Magento 2 module structure is more organized than Magento 1. It keeps all views, controllers and config files in one directory. This make it easier to maintain and develop modules. Let’s see how to create simple module with controller.
Create name space under app/code. Eg: app/code/Magleaks
Create your module under your name space. Eg: app/code/Magleaks/Tutorial1
Create module.xml file under module etc folder. app/code/Magleaks/Tutorial1/etc/module.xml (this is the minimum requirement for module. No need to create module xmls under etc.)
Copy module deceleration from core module like Magento_Catalog and change module name, and remove other contents.
Run setup upgrade to configure the module. (<Magento 2 root>/bin/magento setup:upgrade)
New module name should be in module list. Also you can verify this in admin. (Stores=>Configuration=>Advanced=>Advanced)
Now lets create controller. Create controller class Magleaks/Tutorial1/Controller/Tutorial1/Index.php as follows.
<?php
namespace Magleaks\Tutorial1\Controller\Tutorial1;
class Index extends \Magento\Framework\App\Action\Action {
public function execute() {
echo 'We are here !';
}
}
Create file Magleaks\Turorial1\etc\frontend\routes.xml for route. You can copy content from Magento core and edit.
Magento 2 introduced brand new theme management mechanism. Some of new features are as follows
Extending layout files. In Magento 1 we had to copy entire layout xml file to local folder in order to make any changes. But Magento to allow it to extend layout files. Just need copy the part that you want to change. Also it allow you to override entire layout xml as in Magento 1, but it is not recommended.
Organized layout structure. Does not allow to add layout files without module folder. Check the folder structure.
Less as css compiler.
Css / Less inheritance. Less files from parent theme can be changed in custom themes.
Built in less compiler to make development easier.
Css/Less library.
I will be demonstrating how to create and apply new theme in Magento 2 in part 2.