Design.IO live updates not working #119

activestylus opened this Issue Apr 21, 2012 · 10 comments


None yet
2 participants

Right now when I save changes to view file, all it does is change the URL of my browser to root http://localhost:3000/ (no redirect, just text change)

My Env:

  • tower-0.4.0-10
  • node-0.6.13-pre
  • Mac OS 10.6.7

Here is output from the console

info: transport end (undefined)
info: handshake authorized 17296689232110320327
info:  Name:     connect                                  Type: hook            Data: function () {}
info:  Name: Type: hook            Data: null
info:  Name:     Type: hook            Data: {"body":[{"patterns":["(function() { return new Re ... 
info:  Name:      Type: hook            Data: {"body":"@title = \"New Postz\"\nh3 -> \"Hello
# tower server - - [Sat, 21 Apr 2012 20:37:13 GMT] "GET /posts/new HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.163 Safari/535.19"
[Sat, 21 Apr 2012 20:37:28 GMT] INFO updated app/views/posts/
[Sat, 21 Apr 2012 20:37:28 GMT] INFO updated public/javascripts/app/views/templates.js

Everything looks fine there - no idea what it could be


lancejpollard commented Apr 21, 2012

Have you started the global server with start?

Open 1 terminal window, cd into any project directory with locally installed (node_modules/, and run start. That starts a "global" socket server that will do the pushing for live updates.

Then in your current app (terminal window 2), run node server (or tower server). Internally, tower will run so you don't have to have to open a 3rd terminal window. Now this process will send any file updates to terminal window 1, which will send them to the connected browsers.

That one window running start should always be running. It needs to be executed in a directory containing node_modules/ right now, but that should be refactored away so you can run start anywhere on your computer. For now though, just run it in a node project with installed locally.

I think the big thing is just that start wasn't executed.

npm install -g
cd random/node/project # window 1
npm install start
cd the/tower-app # window 2
node server

# or the manual version
cd the/tower-app # window 2
cd the/tower-app # window 3
node server

Yes, the process was started in a separate terminal session, you can see the output above, followed by the log output of tower server. As a habit I tend to install dependencies locally with npm install -d and I ran start from the app's directory

Mind you the templates are changing when I refresh the page, but only succeeds in changing the URL in my active browser window whenever I save


lancejpollard commented Apr 21, 2012

Do you get live updates when you edit stylus in app/client/stylesheets? Or when you edit javascript? Try adding alert('!') to app/client/config/, on save the browser should alert.

The templates don't live-update yet though. I started on a watch task in the Watchfile, but it's not complete. To get templates to auto-refresh you can probably customize that pretty easily.

Does that help?

OK it's definitely working when I change app/client/stylesheets/application.styl. Works a treat - the page is updated and does not change my URL

However I when I change app/client/config/ I face the same problem as with my views. No alert shows, the only thing that changes is the browser's URL (I'm using Chrome FWIW)

Are you able to replicate?


lancejpollard commented Apr 21, 2012

I'm not able to replicate. Here's what I did:

  • start
  • tower new app
  • cd app
  • npm install
  • node server
  • make html, body background: red
  • add alert('!') to app/client/config/

It's all working for me, also using Chrome.

The browser URL shouldn't be changing, that seems strange. Maybe you can make a quick screencast with something like and email me? Don't know what else it would be.

Make sure there's no errors in the web console, otherwise the javascript may not be executing. I've had that happen before.

Make sure is installed locally as well.

Also, I recommend trying to create your own watch tasks, opens up a lot of possibilities. The plugin just handles a lot of the details/configuration for compiling javascript, just to put it into a clean little bundle. But you definitely can implement a basic javascript watcher very easily by hand, something like:

mint  = require 'mint'
fs    = require 'fs'

watch /app\/.+\.(js|coffee)$/
  # Watchfile's scope
  update: (path, callback) ->
    fs.readFile path, 'utf-8', (error, content) => content, {}, (error, result) =>
        @broadcast body: result

    # browser's scope
    update: (data) ->
      eval("(function() { #{data.body} })()")

I made a quick screencast with iShowU:


lancejpollard commented Apr 21, 2012

Perfect! I see exactly what you're saying.

Try adding the alert('!') to the top of the file:

alert "!"

class App extends Tower.Application
  @configure ->
    @use Tower.Middleware.Agent
    @use Tower.Middleware.Location
    @use Tower.Middleware.Router

  bootstrap: (data) ->

That should show you the javascript is actually reloading.

You were putting it in the bootstrap method, which is called in app/views/layouts/ The javascript reloader isn't that sophisticated yet... moving too fast lol. To make that work, we'd have to start customizing the javascript watcher for every file. That comes later.

When you save a template in app/views/, it's running through that incomplete template reloading watch task, and it looks like it's refreshing the page:

I wrote that a while ago and never finished it. Basically, that task was going to watch when any view file changed, recompile the templates.js (all of the views), and update the window with the url for that view, something like that... Going to get back to that later, once more of the roadmap is finished.

Also, any javascript you edit in app/views won't show up until page refresh. That's because I am treating the views separately from the rest of the coffeescript/javascript in the app.

So it looks like everything's working for you, you were just taking it to new levels it hasn't handled yet.

Also note, you can create a new javascript file and add the alert to see if it works. I usually create something like app/client/ which is like my coffeescript web console.

Does that help?

Yes that helps a great deal. Thanks for the prompt replies and good luck with these new features. The view refresh probably deserves the most attention since it makes development a bit of a pain (cant refresh currently active page if the url is changed)


lancejpollard commented Apr 21, 2012

will fix that url thing, you can comment out the client part of that watch task for now:

    update: (data) ->
      #Tower.View.cache[] = data

      #if data.reload
      #  window.location = data.path
      #  Tower.get data.path

@activestylus activestylus reopened this Apr 25, 2012

Reopening for now so I get pinged when you fix the url issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment