Live-Reload with donejs

if i using the donejs development environment with https://github.com/donejs/donejs-vagrant i can easily start a donejs app. i start the server by donejs develop. a http-server comming up and also a live-reload server.

if i change the index.stache file the live-reaload server said: Reloading we@0.0.0#index.stache!done-autorender@0.6.0#autorender
Ok, but the browser (chrome) does not refresh the page. i make a port forwarding for 8012 to my host system (windows).

with live-reload (https://www.npmjs.com/package/gulp-livereload) i can install a chrome extension that listen to the server, but i how the steal-tools-live-reload works?

Don’t you want the opposite? You are looking at the app through your host system (browser is running on the host system) but the live-reload server is running in your Vagrant. So you want to forward 8012 to the vagrant IP, no?

When you start you server you should see this message:

Received client connection

This is the ssr server connecting to the live-reload server.

Then when you start your browser you should see the message again. This is the browser connecting to the live-reload server. If you don’t see the second message, your browser isn’t connected.

i do not have to use thrid party plugins in my browser like http://livereload.com/ ?

came from https://www.npmjs.com/package/gulp-livereload where i have to install this chrome plugin that’s connected to live-reload server and refresh the browser.

can i use every port for live reload or is there a limit ?
how those the livereload work, in short words? is it using websocket io to push a new content to the browser? and why is a port needed? is port forwarding needed too?

as you described:

  • start can-serve with donejs develop
  • first Received client connection is displayed
  • connected with a brower to http://localhost:8080, second Received client connection displayed
  • change files will automaticly update the browser and the content.

Works like a charm!

@matthewp you are right, we want a port forwarding from 8012 from host to 8012 to guest.

the output matthewp described will looke like this:

vagrant@vagrant-ubuntu-trusty-64:~/we$ donejs develop

we@0.0.0 develop /home/vagrant/we
can-serve --develop --port 8080

can-serve starting on http://localhost:8080
Received client connection
Live-reload server listening on port 8012
Received client connection
Reloading we@0.0.0#styles.less!$less
Reloading we@0.0.0#index.stache!done-autorender@0.6.0#autorender
Received client connection
Reloading we@0.0.0#index.stache!done-autorender@0.6.0#autorender

Tip
i you want using steal-live-reload without can-ssr (which needed a AppMap) you can install http-server and steal-tools.
start steal-tools live-reload, start http-server and open the browser. live-reload will automatic updated the content if you change a file

working great, thanks @matthewp

I take that to mean you got it working?

can i use every port for live reload or is there a limit ?
how those the livereload work, in short words? is it using websocket io to push a new content to the browser?

You don’t need any of those plugins. DoneJS’s live-reload doesn’t work like that, it doesn’t refresh the browser.

What it does is, when you run

donejs develop

It starts a web socket server on port 8012 (you can specify the port with --live-reload-port in can-serve and live-reload-port="8012" in the steal script tag) and does a trace of your app (like steal-tools build does).

When the browser loads your app it connects to the server on port 8012. When any file changes the live-reload server sends a message to the browser telling it what module changed. The browser code then removes that module, and all of its parents, from the registry and re-imports them.

This means only the modules that actually changed are needed to be re-executed.

I also wrote an article about this a while back: https://matthewphillips.info/posts/how-hot-swapping-works.html

yes got it working.

please correct me if i am wrong.
steal-live-reload is also working without can-ssr and the AppMap?

Yes, you can run steal-tools live-reload without ssr.

For frictionless hot reloading of canjs/stealjs you may try this https://github.com/whitecolor/can-hot