How can I make HTML/CSS changes automatically reload in the browser under Windows?

by AMB   Last Updated November 14, 2017 19:01 PM

I am making changes in HTML/CSS. They should be auto-refreshed/shown in my Firefox browser.

Do I need a special editor for this? If not, how can I set this up?

Tags : windows firefox


Answers 5


I would be surprised if this is possible. Auto-refreshing would typically be done with HTML or Javascript code in the HTML file, rather then any editor.

davidgo
davidgo
January 09, 2014 07:48 AM

Firefox getting refreshed automatically does not have to do with HTML editor.

if you use adobe Dreamweaver which is a WYSIWYG(What You See Is What You Get) program for making webpages.you can see the result of HTML code you are writing in the design window in the program. without needing to refresh the window.

gandalf
gandalf
January 09, 2014 07:58 AM

Using the LiveReload app

An app / plugin that does this is LiveReload.

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

However, that app / plugin has not been updated in a while.


Using grunt and a live reload server

What you could do instead is to run a server, such as grunt-contrib-connect, and a plugin that watches for file changes, like grunt-contrib-watch. The server injects JavaScript into your HTML page so that changes in the watched files trigger a reload of the website.

First, install Node.js and then, from the command-line, go to your project folder (where the HTML files are) and run:

npm install grunt grunt-contrib-watch grunt-contrib-connect --save-dev

Create a file called Gruntfile.js and add the following contents:

module.exports = function(grunt) {
    grunt.initConfig({
      watch: {
        files: ['**/*'],
        options: {
          livereload: true,
        },
      },
      connect: {
            server: {
                options: {
                  livereload: true,
                }
          }
      }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('default', ['connect:server', 'watch']);
};

Save it and run the following command:

grunt

Now navigate to http://localhost:8000/ — the assets will trigger a reload of your HTML when they are changed.

Have a look at the grunt-contrib-connect and grunt-contrib-watch documentation for more configuration options.

slhck
slhck
January 09, 2014 07:59 AM

Another program is Brackets, which reflects edits the moment they are made (video), but it probably supports only Chrome for now.

Miha
Miha
January 09, 2014 09:13 AM

When you are editing your file in notepad++, just press cntrl S to save after your changes.

Download the firefox extension for auto refresh

(there are many available) and set the timer to 1 second.

Now whenever you press cntrl S to save your changes the web browser, refreshing at whichever interval you have set, will also reload your last saved changes.

Harman Nieves
Harman Nieves
February 11, 2016 23:39 PM

Related Questions



Change the site's source on each load in Firefox

Updated May 13, 2017 08:01 AM


Addon for updating Firefox config on-the-fly

Updated June 08, 2015 00:00 AM