Live reload/refresh solution for HTML/CSS in 2017 [closed]

Question

So it's 2017 and whilst coding websites we still have to edit, save, switch windows, then hit refresh. Make a small change and do it all over again. And again. And again etc etc.

Am I missing something because surely there is a solution for this now whereby the browser can update automatically as we type, or at least instantly as we hit save?

jsbin.com is a perfect working example of what I'm looking for on my local Apache (Windows 10) setup. I've tried various methods including LiveReload and LiveJS but they are too long-winded and often there's a lag of around 2-4 seconds which is just not quick enough when building websites. They also require a browser extension or a snippet of code inserted into every page that requires monitoring. It all just seems very "hacky" and very 1990's.

I'm curious as to how other developers handle this problem? Is there now a NodeJS solution that I've not come across or is everyone else just doing the edit, save, switch, refresh method? Surely not? For reference I use Atom to edit my html/css/js files etc, then save and view the changes in Chrome. Any thoughts or ideas would be greatly appreciated. Hugely appreciated actually.

Answer 1

EDIT (3/25/2022)

I would just use the Create React App: https://create-react-app.dev/

Or I have created and use a modified and stripped down version of the Create React App template here: https://github.com/stefanbobrowski/Template that also includes a hooked up react-router, useContext global state, and scss.

---

I dropped gulp and now just use npm scripts https://www.npmjs.com/

Right in the package.json file you can use SCSS, autoprefix it, uglify and minify it and your scripts, and control which folders it will output to, for example a production folder.

Here is a sample setup in package.json

{
    "name": "Sample build",
    "version": "1.0.0",
    "description": "New build",
    "author": "Stefan Bobrowski",
    "license": "MIT",
    "main": "index.html",
    "scripts": {
        "autoprefixer": "postcss -u autoprefixer -r production/css/*.css",
        "scss": "node-sass --output-style expanded --indent-width 4 -o production/css development/scss",
        "uglify": "uglifyjs development/js/*.js -m -o production/js/scripts.js",
        "serve": "browser-sync start --server --files \"production/css/*.css, production/js/*.js\"",
        "build:css": "npm run scss && npm run autoprefixer",
        "build:js": "npm run uglify",
        "build:all": "npm run build:css && npm run build:js",
        "watch:css": "onchange \"development/scss\" -- npm run build:css",
        "watch:js": "onchange \"development/js\" -- npm run build:js",
        "watch:all": "npm-run-all -p serve watch:css watch:js",
        "start": "npm run build:all && npm run watch:all"
    },
    "devDependencies": {
        "node-sass": "^4.5.0",
        "postcss-cli": "^3.0.0-beta",
        "autoprefixer": "^6.7.6",
        "browser-sync": "^2.18.8",
        "npm-run-all": "^4.0.2",
        "onchange": "^3.2.1",
        "uglify-js": "^2.8.3"
    }
}

And corresponding file structure setup:

Project
|__ development
|       |____ js
|       |____ scss
|
|__ production
|        |___ js
|        |___ css
|        |___ images
|
|_ index.html
|_ package.json

All the developer has to do is run npm install and then npm start

Answer 2

Note: live-server hasn't been updated since Nov 26, 2018.

---

live-server and json-server.

Live-server able you to instant wrap your application under web server (nodejs) and live-reload all sources to your browser (through webSocket).

Just type $> live-server in your project folder and it works!

You can use this in couple with json-server, who give you a very dead simple way to create CRUD REST APIs, with json keys and values, from JSON file.

Provide a .json file with the DB Schemas, in a json format, just type $> json-server --watch mydb.json and it works fine too!

2 minutes of your time gives you a web-server with live-reload capabilities and a custom decentralized API.

Hope that helps you!

Answer 3

Using a task-runner is absolutely fundamental for every self-respecting developer.

In my opinion, your best bet is to set-up a Gulp, paired with Browser-Sync for your project. It can be set to listen for changes in every type of file that you are using, minimizing the hassle of guessing what is changed and what is not.

You can find a neat tutorial on how to do this here on CSS Tricks.

[UPDATE 12/17/2019]:

A better approach would be to use live-reload is by using an npm plugin called live-server.

You just open the parent directory of your project e.g. parent-dir/ where your project lies e.g. parent-dir/project. Then, you open up a terminal and type in:

live-server project

Hit Enter, and your project will be opened up in your default browser window.

NOTE: You will need nodejs if you plan on using npm.