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.
To use this you will need to have the following:
- Node.js must be installed https://nodejs.org/
Step by step
- Install node.js
- It comes with npm, node package manager
- Install livereload
- I used
npm install livereload -g
- This makes
livereloada global command.
- Windows may want you to restart existing command lines to see it
- I used
- Run the web server from flow
- Open a command line window
- Navigate to your project directory using
- For example,
flow run web --timeout 0
- This will keep the flow server running on the folder.
livereloadon your web output folder
- Open a second command line window
- Navigate to your project folder again
- run livereload on your output folder, by default
- Add a custom index.html with livereload enabled
- 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
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!