spine.js hem server, hem build FAQ for Windows

Question

I'm trying to mimic some basic functionality of the Todos example. After reading spinejs.com, many articles, and taking a few attempts and not getting off the ground, I do need to ask and get some help here. I wish this was more clear-cut, and I'd like to help others as well. I'm on Windows7 and I'm using spine.app to create my app, controllers, models - also using jQuery.tmpl I'm using CS, but pretty new to it.

I'm not really sure where I need to use require (if at all) - I'm using an modules.exports = .... statement on all M, C so index.coffee should be able to find, I assume Maybe this is not the case - I see even though controllers/contacts used a modules.exports statement, the index still used a require.

Is index.coffee just particular about visibility ? I see Contacts uses Contact without any require statement.

I've seen the main.App Controller be instantiated, from CS, as in Todos or in the jQuery() script in the html, as in Contacts.
I'm assuming you should either -build the whole thing and include application.js OR -use the jQuery() function to create your App via javascript.

If this does compile, will it end up in public/application.js ??

I'm getting a nasty parse error, and yes, I'm aware you consistently have to use spaces (no tabs)

That being out of the way, I'm getting hung up on the 1st require line require('lib/setup')

Am I going to need some Cygwin stuff ? I can get it if it helps.
and I've seen the Google Groups, guillaume86's comments, contrib and CS irc channel.

I'm not sure what (date) version of hem I have but I did try the minify: false, option and a few other things, to try to debug this.

The good news: I'm pretty stubborn and will get this to work, if I can get a little help here. More to come, but I'm going to close at this point.
Thanks in advance for your suggestions.

Answer 1

I don't think this will help the OP too much, but thought I'd write this up to help anyone else who is looking to get started with these awesome tools.

Before you go further: I've rewritten this with updates at How to manage client-side JavaScript dependencies?

Here's a basic list for getting set up with a Spine, hem, coffeescript app. I only develop on Linux, so I'm not sure if some of these steps would have problems on windows, namely npm commands. Should work fine on Mac; I know other who use the same toolchain.

1. Install NPM: curl http://npmjs.org/install.sh | sh on a *nix system. I'll assume it's available from the command line.
2. npm install -g spine.app will make spine available as a global command
3. spine app folder will make a Spine project called app in folder, generating the right directory structure and a bunch of skeleton files to get started.
4. cd to folder and edit dependencies.json for the libraries you need. Add them to slug.json so that hem knows where to find them as well. You can install hem globally (npm install -g hem) or locally, as in the next step.
5. npm install . to download all the dependencies you just entered in, including hem.

6. If you take a look at the default spine config, there is a app/lib/setup.coffee where you require all the libraries you need from your dependencies. Examples:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'
   

7. In index.coffee, you just require lib/setup and load the main controller for your app. In addition, you need to require any other classes in those other controllers.

8. The default generated index.html will usually be fine for loading your app, but modify as necessary.
9. From folder, run node_modules/hem/bin/hem server to start a hem server, and navigate to localhost:9294 to see your app. If you installed hem globally (npm install -g hem), then hem server by itself may work, but sometimes it gets confused about the path.
10. Build the rest of your app using proper MVC techniques, and use stylus for CSS and eco for views.

One more thing: normally, hem server will update automatically as you update your code and save files, which makes it a cinch to debug. Running hem build will compile your app into two files, application.js, which is minified and application.css. If you run hem server after this, it will use those files and no longer update automatically. So don't hem build until you actually need a minified version of your app for deployment.

See this other thread about that: Spine.js & hem getting started

Windows is supported (there were concerns in the past, but they have been resolved). There is actually a branch of hem that being more actively developed, since the original branch is no longer being maintained by the developer. You can check out branches version0_2 or version0_3 which have been getting updates and may eventually get windows support.

HTH.