{"id":53,"date":"2020-06-30T10:42:33","date_gmt":"2020-06-30T10:42:33","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/"},"modified":"2020-06-30T10:42:33","modified_gmt":"2020-06-30T10:42:33","slug":"livereload-with-sublime-text","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/","title":{"rendered":"Livereload with sublime text"},"content":{"rendered":"<p>Hello readers,<\/p>\n<p>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.<\/p>\n<h2>Resource we need for livereload with sublime text<\/h2>\n<ul>\n<li>\u201cLivereload\u201d package in sublime text<\/li>\n<li>\u201cLivereload\u201d extension with browser specific.<\/li>\n<\/ul>\n<h2>How Livereload with sublime text work?<\/h2>\n<p>Livereload with sublime text work as soon as you save the file in your sublime text. For example if you are working on <code>.html<\/code> 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.<\/p>\n<h2>Install sublime package for livereload with sublime text<\/h2>\n<ul>\n<li>Open your package manager by hitting <code>CTRL + SHIFT + P<\/code>. It will opens package manger box where you can type and search for your desire plugin.<\/li>\n<li>Now type \u201cLivereload\u201d in the textbox and click the option that says \u201cLivereload\u201d<\/li>\n<\/ul>\n<p>Great! now you have install the livereload package in your sublime.<br \/>\nAgain, we need to configure the setting of livereload in order to work.<\/p>\n<ul>\n<li>Go to <code>Preferences &gt; Package Settings &gt; LiveReload &gt; Setting - Default<\/code><\/li>\n<li>Replace the code with below code.\n<pre><code>\n       { \n           \"enabled_plugins\": [ \n               \"SimpleReloadPlugin\", \n               \"SimpleRefresh\" \n           ]\n       }\n    \n<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>Just to make sure your plugin work perfectly you have to re-start your sublime text.<\/p>\n<h2>Install browser extension<\/h2>\n<ul>\n<li>Click the link and install the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/livereload\/jnihajbhpnppcggbcgedagnkighmdlei?hl=en\">extension for chrome<\/a><\/li>\n<li>After that a small icon will appear on the top right corner of the browser chrome.<\/li>\n<li>Browse your local folder in chrome and click the icon to enable livereload.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" srcset=\"https:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png 263w, https:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon-262x112.png 262w\" alt=\"livereload-icon\" width=\"263\" height=\"112\" \/><\/li>\n<li>Now your sublime task bar should say \u201cNew LiveReload c2 client connected\u201d<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/new-livereload.png\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" srcset=\"https:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/new-livereload.png 388w, https:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/new-livereload-300x90.png 300w, https:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/new-livereload-262x78.png 262w\" alt=\"livereload with sublime text\" width=\"388\" height=\"116\" \/><\/li>\n<\/ul>\n<p>Note: The above taskbar message in sublime text display for a while and it automatically disappear.<\/p>\n<p>Now that\u2019s all. Open your project folder and try editing your page and start saving your time for refreshing your page every time you make changes. <img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/1f642.png\" alt=\"\ud83d\ude42\" \/><\/p>\n<p>Have a nice day.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u201cLivereload\u201d package in sublime [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-tips-and-ticks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Livereload with sublime text - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Livereload with sublime text - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"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 \u201cLivereload\u201d package in sublime [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T10:42:33+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/\",\"name\":\"Livereload with sublime text - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png\",\"datePublished\":\"2020-06-30T10:42:33+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage\",\"url\":\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png\",\"contentUrl\":\"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Livereload with sublime text\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Livereload with sublime text - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/","og_locale":"en_US","og_type":"article","og_title":"Livereload with sublime text - Santosh Kumar Shah","og_description":"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 \u201cLivereload\u201d package in sublime [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T10:42:33+00:00","og_image":[{"url":"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png","type":"","width":"","height":""}],"author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/","url":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/","name":"Livereload with sublime text - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage"},"image":{"@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage"},"thumbnailUrl":"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png","datePublished":"2020-06-30T10:42:33+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#primaryimage","url":"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png","contentUrl":"http:\/\/santosh-shah.com\/wp-content\/uploads\/2016\/12\/livereload-icon.png"},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/livereload-with-sublime-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Livereload with sublime text"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}