What it does
Edit your HTML/CSS/JS on your desktop machine, save the edited file, and the changes are automatically reloaded on connected clients. This saves you from rebuild, deploy and restart your mobile application every time a code change is made. The result is a much faster workflow when coding HTML/CSS/JS.
Any number of clients can connect. You can connect from any browser (desktop or mobile), or you can connect from a mobile WebView widget of a native app (this should work on all mobile platforms that supports a Web widget, Android, iOS, Windows Phone, Firefox OS, Tizen, etc).
HyperReload uses node-webkit as its runtime (an amazing piece of software).
To run HyperReload, there is no need to do an actual build, just clone the source, then run using node-webkit. Just place the node-webkit executable files in the same folder as package.json and launch the node-webkit executable file.
How to use HyperReload
1. Launch the HyperReload desktop application
When you run HyperReload on your desktop machine, it will start a local web server and listen for file updates, notifying connected clients to reload when files are saved.
2. Connect from the browser/device
Connect from a web browser on a mobile device or laptop/desktop machine by entering the URL displayed in the HyperReload window. For example:
You can also connect from a WebView widget in a mobile app. For example, on Android you use code like this:
3. Click "Run"
When connected, click the Run button of the project you wish to launch, and the app will be loaded onto the connected device(s).
When editing and saving files in the project, the app will be automatically reloaded on the connected client(s). (Note that directory traversal is limited to three levels, this can be configured in the file settings.js, if you need deeper traversal.)
4. Create new projects using drag and drop
To create a new project entry, drag the main HTML file of our project into the HyperReload window. (This step assumes you have created a folder with an HTML file that has some basic content.)
5. Structure of the main HTML file
For HyperReload to work, you need to have a main HTML file. This is the file you want to be reloaded when a file in the project is updated. (Saving any file in the same directory or subdirectory will reload this file.)
For the reload mechanism to work, the server inserts a script tag in the main HTML file that installs the reloader script. This script will be inserted after the ending title tag, before the ending head tag, after the opening body tag, and before the ending body tag, in that order (first found tag will be used).
For example, for this file, the script tag would be inserted after the ending title tag:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title><!-- script tag will be inserted here --> </head> <body> <h1>Hello World</h1> </body> </html>
Building from source
Here is a script that can build stand-alone redistributable packages:
In addition, there is a script 'buildPlugin.rb' that you should copy and modify to customise the build (e.g. defining the name of the package to build).
buildPlugin.rb may include localConfig.rb, if it exists. Use it for non-version-controlled settings.
This script requires that a directory named 'node-webkit-bin-0.8.0' exists parallel to the HyperReload source dir. This directory contains the uncompressed node-webkit binaries. Note that depending on the version of node-webkit used, you must update the directory names and executabe names in the build script.
If you want to use a different version of node-webkit, replace "0.8.0" in this example with the number of your chosen version. You must also change the function "nodeWebKitVersion" in buildPlugin.rb, or override it in localConfig.rb.
HyperReload node-webkit-bin-0.8.0 node-webkit-v0.8.0-linux-ia32 creadits.html libffmpegsumo.so nw nw.pak nwsnapshot node-webkit-v0.8.0-linux-x64 ... node-webkit-v0.8.0-osx-ia32 ... node-webkit-v0.8.0-win-ia32 ...
Documentation and issue tracker
Developer documentation and design documents are on the [GitHub wiki] (https://github.com/divineprog/HyperReload/wiki/_pages).
Use the Github issue tracker to report bugs, ask questions, and make suggestions (there are labels for different issue types you can use).
HyperReload is based on several truly wonderful open-source projects, including:
For a full listing of software used by HyperReload, see folder "license".
HyperReload is licensed under the Apache license. You are welcome to contribute to the project and use the source code with your own projects.
See file LICENSE.md and folder "hyper/license" for full licensing information, including licenses for software used by HyperReload.