web "livereload" example

sign up sign in

livereload is a tool that automatically reloads a webpage when it detects changes in the files with a folder. Using this tool is quite easy, and can be set up with a few minutes of effort for fast iteration times on the web platform.

Note that livereload is not luxe specific, so this works for any web project, framework or application. This also works anywhere, for example mobile devices will also refresh when there are changes on your development machine.

Requirements

To use this you will need to have the following:

Step by step

  1. Install node.js
    • It comes with npm, node package manager
  2. Install livereload
    • I used npm install livereload -g
    • This makes livereload a global command.
    • Windows may want you to restart existing command lines to see it
  3. Run the web server from flow
    • Open a command line window
    • Navigate to your project directory using cd (change directory)
    • For example, cd C:/dev/myproject/
    • run flow run web --timeout 0
    • This will keep the flow server running on the folder.
  4. Run livereload on your web output folder
    • Open a second command line window
    • Navigate to your project folder again
    • run livereload on your output folder, by default bin/web
    • livereload ./bin/web/
  5. Add a custom index.html with livereload enabled
    • Add a file node to your flow project for a custom_index.html
    • The file name is not specific
    • The file path is relative to your project.flow
    • See full project example project.flow
    • Create the custom_index.html file with livereload script tag
    • See full index example custom_index.html
  6. Use “build only” on your project
    • flow build web (not flow run web).
    • Sublime Text/Atom this is under flow status -> Toggle build only
    • Building will now reload automatically

Example

I recorded a gif of the process on mac, with Sublime Text.
The following is shown:

  • I run the flow web server into the background (using flow launch instead of flow run)
  • Then I run the livereload server
  • Then tell sublime to build only
  • Changes are reloaded automatically!


Have fun!

Tags
luxewebtoolsreloadlivereload