Use browsersync in Magento frontend development workflow – Sample 1

As a frontend developer immediately you have tons of instruments at your disposal. In on a regular basis use you will want a minimum of one software which will probably be assigned to observe, course of, generate, clear, decrease code. I’ll try to persuade you to start utilizing one which may be nice assistant in trendy frontend workflow. I’ll speak about Browsersync.io.

So, what’s borwsersync!?

BrowserSync makes your tweaking and testing quicker by synchronising file modifications and interactions throughout a number of units.

Started first as live reloader, you realize, open your website in browser then write a number of lines of code, hit refresh, return to code, edit the code, again to browser refresh, open second browser, resize it, refresh, then repeat… You bear in mind :-). By utilizing Browsersync you’ll be able to keep away from all that “unneeded” repeated duties and save money and time.

So, browsersync is node.js module which began and behaves as a standalone server and you should utilize it with different native servers, apache for example, as proxy server. It injects small script into each page which communicates with the server through WebSockets. When an occasion happens — similar to a file modification or scroll action — the server sends an replace notification to all related units.

Some of the important thing options that comes with browsersync:

• Scroll on one browser; different browsers observe the scroll to the identical level
• Click hyperlinks; different browsers load the clicked URL
• Fill out & submit varieties; different browsers submit
• Test responsive designs; see your website rendered on totally different units at one time
• Change HTML, CSS & JS; mechanically inject these new files with no page refresh

And even have nice wanting UI the place you’ll be able to have overview of all out there instruments and essential data. You can discover UI in browser typing https://simplemagento.net:3001, URL tackle will probably be proven in terminal/console window.

Browsersync can be utilized in varied methods, it is dependent upon your private choice and in addition in your present frontend workflow. You can use it beneath gulp.js or grunt.js process or my private alternative – as a standalone console software.

Let’s start with the installation.

We consider you have already got installed node.js so we are going to skip installation of node. There are two choices: world and native installation. Global means you can start browsersync in any directory, and native for every challenge separate, you determine.

Global:

npm install -g browser-sync

Local:

npm install browser-sync --save-dev

If you might be working Mac OSX, please don’t use “sudo” should you encounter error in installation, please check NPM permissions.

After installation let’s start with some basic items

browser-sync --version

browser-sync start --help

Great issues about browsersync is you can write down recipes and reuse it on totally different challenge. Or possibly to run totally different process on one challenge.

Recipes are stand-alone examples of learn how to use Browsersync alongside many different standard instruments. Each example may be run individually and is a good way for newcomers and execs alike to get their heads across the totally different use-cases which can be doable.

Checkout github for full list of recipes.

# List all available recipes
$ browser-sync recipe ls
 
# Copy files for gulp.sass recipe
$ browser-sync recipe 'gulp.sass'
 
# Copy files for gulp.sass recipe into custom output directory
$ browser-sync recipe 'gulp.sass' -o 'my-project'

Please observe you could install globally browsersync to get recipes command!

Please confer with documentation the place yow will discover extra examples and guides.

Using in Magento 2 development

So, what about Magneto? In Magento 2 version they introduce new frontend workflow utilizing grunt as a process runner and livereload.js as a “watcher” for modifications inside .less/.css files.

For livereload you could have installed browser extension. It is just not my factor to go along with inside browser development so I select browsersync over livereload. This is my private alternative, it’s as much as you to search out comfy atmosphere for development.

If you have already created customized theme in Magneto2 and a minimum of performed with .less files you might be aware of the frontend workflow. I’ve already created customized theme “simplemagento” and am utilizing grunt as a process runner:

grunt clean:simplemagento
grunt exec:simplemagento
grunt less:simplemagento
grunt watch

To start utilizing browsersync go to pub static folder the place are static files generated and easily watch modifications.

cd magento-dir/pub/static/frontend/simplemagento/green/en_US/css

Start watching with this command

browser-sync start --proxy 'magento.local.address' --files="*.css"

Stanislavs-MacBook-Pro:css stamba$ browser-sync start --proxy 'magento.202' --files="*.css"
[BS] Proxying: http://magento.202
[BS] Access URLs:
 -------------------------------------
       Local: https://simplemagento.net:3000
 
 -------------------------------------
          UI: https://simplemagento.net:3001
 -------------------------------------
[BS] Watching files...

After I’ve made modifications in customized .less file, grunt picks up on this, calls PHP, generates new css inside pub/static folder after which browsersync “listens” and serves inside browser modifications.

[BS] Proxying: http://magento.202
[BS] Access URLs:
 -------------------------------------
       Local: https://simplemagento.net:3000
 
 -------------------------------------
          UI: https://simplemagento.net:3001
 
 -------------------------------------
[BS] Watching files...
[BS] File changed: styles-m.css
[BS] File changed: styles-l.css

So, right here you go, should you suppose that this will probably be of use and addition to your present workflow please write it down in feedback and particularly if you have one thing so as to add or change on this matter.

Thanks.