Livereload with sublime text

Hello readers,

In this article I am going to show you how you can Livereload with sublime text. This article is useful for the developer who are working on their localhost project and trying to view the output on browser with local path.

Resource we need for livereload with sublime text

• “Livereload” package in sublime text
• “Livereload” extension with browser specific.

How Livereload with sublime text work?

Livereload with sublime text work as soon as you save the file in your sublime text. For example if you are working on .html file, you made any change and save it. Now you can go to your browser to see update without having to reload the page. The extension will refresh the page automatically as you save your file.

Install sublime package for livereload with sublime text

• Open your package manager by hitting CTRL + SHIFT + P. It will opens package manger box where you can type and search for your desire plugin.
• Now type “Livereload” in the textbox and click the option that says “Livereload”

Great! now you have install the livereload package in your sublime.
Again, we need to configure the setting of livereload in order to work.

• Go to Preferences > Package Settings > LiveReload > Setting - Default
• Replace the code with below code.

  
         { 
             "enabled_plugins": [ 
                 "SimpleReloadPlugin", 
                 "SimpleRefresh" 
             ]
         }
      
  

Just to make sure your plugin work perfectly you have to re-start your sublime text.

Install browser extension

• Click the link and install the extension for chrome
• After that a small icon will appear on the top right corner of the browser chrome.
• Browse your local folder in chrome and click the icon to enable livereload.
  
• Now your sublime task bar should say “New LiveReload c2 client connected”
  

Note: The above taskbar message in sublime text display for a while and it automatically disappear.

Now that’s all. Open your project folder and try editing your page and start saving your time for refreshing your page every time you make changes.

Have a nice day.