Chapters Close

Uses and configuration of LiveReload on Magento 2

Apr 14th, 2020 6 min to read

Hello readers welcome to my new post on Magento 2. I have written this post while working on one of my recent projects. Considering the issue I faced and solution I got after doing some research and development, I thought of sharing it with my virtual colleagues like you.

I this post, I will be guiding you through what is LiveReload, what is Grunt, how to install Grunt, how to install LiveReload, and finally how to work with LiveReload. So without further a do, lets dive into the post.

But before starting, there are following prerequisites which must be met.

Prerequisites

  • Set your Magento 2 to the developer mode.
  • Before installed Grunt please verify that Node.js already exists on a system.

What is LiveReload?

  • LiveReload is a browser extension for web developers to easily develop web design.
  • To utilize LiveReload, you would like a client (this script) in your browser and a server should be run on your development machine.
  • LiveReload tracks filesystem changes. When you save a file, it will be pre-processed as required, and the browser will be refreshed.
  • It’s a better way to develop a Magento website using this kind tool because for a Magento developer it’s to much time-consuming process to change CSS files, clean the cache and refresh the page manually to see the result, then he again goes back and does some other changes on CSS then repeat the same process and so on, while with the Liverelaod you to just save and check on the browser and all the changes has applied on the browser web page.
  • This reduced the time to clean the cache, either deploying the static-content, but you do need Grunt installed on the server.

What is Grunt?

  • Grunt (Grunt JavaScript Task Runner) is a tool that lets you build automated tasks in JavaScript.
  • This method was used to perform regular tasks like minification, compiling, unit testing and linting automatically. It uses a command-line interface to run custom tasks specified in a file (known as a Gruntfile).
  • Magento 2 contains manual tasks that you only need to configure.

Now, first of all, We are starting to install the grunt on your local or development server.

Installation of Grunt

  • Install the Grunt CLI globally on your server. To do this, run the following command in a command prompt
$ npm install -g grunt-cli
  • Go to your project root(<Magento_root>) directory to copy and paste the contents of the following sample files:
    • package.json.sample into package.json
    • Gruntfile.js.sample into Gruntfile.js
    • grunt-config.json.sample into grunt-config.jso
  • To Install the node.js project dependencies, including Grunt, for your Magento instance. To do this, run the following commands in the 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/themes.js file, add your theme in module.exports as shown below:
module.exports = {
       ...
   <theme>: {
   area: 'frontend',
       name: '<Vendor>/<theme>',
       locale: '<language>',
       files: [
       '<path_to_file1>', //path to root source file
       '<path_to_file2>'
   ],
       dsl: 'less'
       ...
},
  • Now you can use the grunt clean to delete static files in pub/static and var directories that are connected to the theme.
  • The grunt watch command can be used to detect modifications in source code, recompile.css code, and refresh pages in a browser.

Installation of Livereload

  • Install and configure the Livereload extension on your development browser. Refer the link for download the browser extension.
  • Installed the Livereload globally on your server. To do this, run the following command in a command prompt:
$ npm install -g livereload 
  • To confirm the Livereload installed successfully on your server, run the below command in the command line.
  • Then implement the script code below inside <head> tag in default.xml or default_head_blocks.xml of your current theme.

For example

app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="http://mage233:35729/livereload.js" src_type="url" />
    </head>
</page>

On the above code, you can see the src URL add the JS file. Please check the details below.

  • Your store URL: http://mage233
  • Your Port Number(Mostly, It remains the same): 35729
  • Add this JS File on the root of your project: livereload.js

You can download the livereload.js from here.

How to work with Livereload?

  • LiveReload toolbar button is located in the main toolbar in Chrome, Safari and in the Add-on Toolbar of Firefox (at the bottom).
  • Click on the LiveReload toolbar button to enable or disable LiveReload.This icon indicates LiveReload status of the current tab (unavailable / disabled / enabled, connecting / enabled, connected).
  • First of all, You have to run the grunt watch command in the command line to monitor the file CSS changes.
  • You have to enable the LiveReload extension from your browser toolbar. You can see the inner dot darken after enabling the extension.
  • To check that everything goes right. Please enter http://mage233:35729 URL on the browser. It will show the  {“tinylr”:”Welcome”,”version”:”1.1.1″}
  • Now open your _extend.less file and add/edit the CSS changes and save it. You will see in grunt watch command toolbar pub static file updates and show the updated file.

Finally, the changes appear quicky on the browser web page without the page reload.

I hope this will help to integrate theme easily. This is the most suitable way to integrate a theme.

Thanks for reading this post and feel free to drop your comments, will be happy to read them. See you on my next post, till then take care.

Magento 2 frontend tools for developers

Oct 6th, 2019 4 min to read

As developer we know, how extra 15 mins could help us in cross-checking the work and improve if something is lacking. Not every developers has those extra 15 mins, but you can produce it by increasing your work speed and using tools already provided in the system.

The blog is important for all the Magento developers who want to speed up Magento 2 frontend development using chrome extensions. .

Why we should use Chrome extensions for Magento 2 Frontend Development?

  • Do you have an issue with the finding template/block without enabling a template hint?
  • Taking time while theme development/customization for finding a correct block/layout/phtml?
  • Having difficulties to identify which queries are executed on a particular page?
  • Do you want to increase the theme development speed?

Available Chrome extensions

I have checked the various available extensions to speed up Magento 2 frontend development. I have found the best 2 extensions which I have mentioned below. You can use any of them. Mage chrome toolbar by Magespecialist

Mage chrome toolbar by Magespecialist

JH Block Logger

Above both extensions have their own benefits but it depends on your requirement. Both tools are very easy to install & use.

Benefits

  • It allows you to quickly access the information you need to debug your Magento performances, to build your new theme or to modify an existing one.
  • Easily and fast access to observers, profilers and theme information.
  • Help to identifies phtml/layout/block for an element.
  • Help to identifies locale, theme & stack.
  • Get information about which queries are executed on the page and how much time taken by each query.
  • All this information are available with one click after one-time setup & configuration.

Comparison

Features of Mage chrome toolbar

Global Page Information

From the main panel you can see information from:

  • Theme
  • Controller / Router
  • Request parameters
  • Layout and Layout updates
  • Observers
  • Data Models inspector
  • Collections inspector
  • Blocks, Containers, uiComponents
  • Profiler

Item Information

By selecting an item in you page you can see:

  • Block information
  • Used template
  • Server elapsed time
  • Block nesting
  • Template file
  • Cache information
  • uiComponent information
  • Container information

Mage chrome toolbar’s installation & configuration

  • Go to the project root directory in CLI and run following command
    • composer require msp/devtools
  • Now execute below command to Update database
    • php bin/magento setup:upgrade
  • Turnoff Full page caching while using this tool.
  • Open Magento backend and go to Stores > Settings > Configuration > MageSpecialist > DevTools
  • Enable the devtools and set IP restrictions (This extension working on restricted ip’s only)
  • To enable Profiler to do the following.
    • Add below line to  pub/index.php
$_SERVER['MAGE_PROFILER'] = [
     'drivers' => [
          [
      'output'=>'MSP\DevTools\Profiler\Driver\Standard\Output\DevTools'
      ]
   ]
];
  • Or you can add below line to .htaccess
SetEnv MAGE_PROFILER MSP\DevTools\Profiler\Driver\Standard\Output\DevTools
  • Now, Install chrome extension from below link

https://chrome.google.com/webstore/detail/magespecialist-devtools-f/odbnbnenehdodpnebgldhhmicbnlmapj

That’s it installation & configuration is done. I had followed some basic and simple steps to use tools. Now, let’s check some screens of this tool which I had taken it from my instance.

Special thanks to @wearejh & @magespecialist for providing such nice tools to Magento Developers.

I hope this blog will help you with frontend development. Let me know your thoughts in the comment section. And if you have any query with this blog I will be happy to solve that. Thanks and cheers … 🙂

How to use grunt in Magento 2?

Nov 1st, 2018 3 min to read

In this article, you will be learning about how we can use grunt in Magento 2.

Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively.

Follow the below steps to use grunt in Magento 2:

  • Step 1: Install Node.js
  • Step 2: Install Grunt CLI
  • Step 3: Install Node.js dependencies
  • Step 4: Add a theme to Grunt configuration
  • Step 5: Run Grunt commands

Step 1: Install Node.js

First, we need to install a stable version of Node.js.

Step 2: Install Grunt CLI

Now install the Grunt CLI tool globally by the following command:
npm install -g grunt-cli

Step 3: Install Node.js dependencies

Install the node.js project dependencies, including Grunt, for your Magento instance. To do this, run the following commands in the command prompt:
cd <your_Magento_instance_directory>
npm install
npm update

Step 4: Add a theme to Grunt configuration

Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme in module.exports as shown below:

module.exports = {
       ...
   <theme>: {
   area: 'frontend',
       name: '<Vendor>/<theme>',
       locale: '<language>',
       files: [
       '<path_to_file1>', //path to root source file
       '<path_to_file2>'
   ],
       dsl: 'less'
       ...
},

Where the following notations are used:

<theme>: Your theme code, conventionally should correspond to the theme directory name.
<language>: specified in the ‘code_subtag’ format, for example, en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language.
<path_to_file >: the path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme/>/web. You need to specify all root source files of the theme. If your theme inherits from a certain theme and does not contain its root source files, specify the root source files of the parent theme.

Step 5: Run Grunt commands

Now the installation process is completed, the next step is to run the Grunt commands:

grunt clean: This command removes static files related to your theme in both pub/static and var directories.

grunt exec: This one republishes source files symlinks to
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt less: This command compiles all the css file using the symlinks in this location
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt watch: This command is used to start the grunt tool to track the changes done in the main files like .less and re-compiles into CSS files.

Every time you change any of this in the source file, grunt watch will show notification in the terminal about the specific change and recompiles the changes simultaneously.

Cheers!

Grow your online business like 2,053 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.