Design.IO live updates not working #119

Closed
activestylus opened this Issue Apr 21, 2012 · 10 comments

Comments

Projects
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
  • design.io-0.3.1
  • node-0.6.13-pre
  • Mac OS 10.6.7

Here is output from the console

# design.io
info: transport end (undefined)
info: handshake authorized 17296689232110320327
info:  Name: design.io-server     connect                                  Type: hook            Data: function () {}
info:  Name: design.io-watcher::tower-test design.io-watcher::tower-test::design.io-server::connect Type: hook            Data: null
info:  Name: design.io-watcher::tower-test design.io-watcher::tower-test::watch     Type: hook            Data: {"body":[{"patterns":["(function() { return new Re ... 
info:  Name: design.io-watcher::tower-test design.io-watcher::tower-test::exec      Type: hook            Data: {"body":"@title = \"New Postz\"\nh3 -> \"Hello
# tower server
127.0.0.1 - - [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/new.coffee
[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

Owner

lancejpollard commented Apr 21, 2012

Have you started the global design.io server with design.io start?

Open 1 terminal window, cd into any project directory with design.io locally installed (node_modules/design.io), and run design.io 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 design.io so you don't have to have to open a 3rd terminal window. Now this design.io process will send any file updates to terminal window 1, which will send them to the connected browsers.

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

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

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

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

Yes, the design.io 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 design.io start from the app's directory

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

Owner

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/application.coffee, 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 design.io does not change my URL

However I when I change app/client/config/application.coffee 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?

Owner

lancejpollard commented Apr 21, 2012

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

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

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 http://www.screenr.com/jhr 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 design.io-javascripts is installed locally as well.

Also, I recommend trying to create your own watch tasks, opens up a lot of possibilities. The design.io-javascripts 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) =>
      mint.coffee content, {}, (error, result) =>
        @broadcast body: result

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

I made a quick screencast with iShowU: http://www.filedropper.com/design-io-test

Owner

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/application.coffee. 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:

https://github.com/viatropos/tower/blob/master/lib/tower/server/generator/generators/tower/app/templates/watch#L73

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/palette.coffee 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)

Owner

lancejpollard commented Apr 21, 2012

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

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

      #if data.reload
      #  window.location = data.path
      #else
      #  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