Auto refresh page if source code changes

Hey everyone,

I’m looking for some kind of an auto refresher that detects changes saved in the source file and than automatically refreshes the page.
I use Atom to learn/create HTML and CSS files and Google Chrome to view the results. So the goal is that whenever I make changes in Atom and save it, the page which is open in Google Chrome will auto refresh.
Anyone with experience regarding this ‘problem’? I think it will give a productivity boost!

Greetings from a rather new member :wink:

3 Likes

There’s a chrome extension called livereload. You also need something watching the file system that tells livereload when something has changed, one such program is the ruby gem guard with its livereload plugin

3 Likes

Well, welcome to Codecademy!

If I understand what you’re talking about, codepen.io as you as you save it once, it will always autosave.

I hope this helps =)

2 Likes

This sounds like the thing I need since I like to use my own text editor rather than a web text editor. However, I don’t know how to use or install this. Is there any good tutorial or some clear steps to fix this?

1 Like

I found a way to use “LiveReload”. Below are the steps I followed to get this to work. Figured this could help others as well.

Steps for Atom

  1. Install livereload plugin from following link: https://atom.io/packages/livereload

  2. Follow method 1 (Use browser extension) from following link: https://www.npmjs.com/package/livereload
    I can’t seem to add the script text directly because this editor deletes it.

  3. Install the livereload plugin in Googe Chrome.

  4. When the livereload plugin is active in Atom (Ctrl+Shift+R), you’re all set :slight_smile:

Hope this helps!!

1 Like