Play 2 and Angular on a Vagrant

play-angular-vagrant.md

So here is a Gist for what might just be the mother of all framework stacks. How about a little MVC with your MVC? I think there are some really good reason to want to do this. But be warned its not for the faint of heart. The easy part is getting the basics installed here's my Berks:

cookbook "dmg", "<= 2.0.6"
cookbook "git"
cookbook "curl"
cookbook "nodejs"
cookbook "npm"
cookbook "java"
cookbook "play", git: 'https://github.com/njin-fr/play2.git'
cookbook "rvm", git: 'https://github.com/fnichol/chef-rvm.git'

Nothing too extreme, and now here's the interesting bits of my Vagrantfile:

    chef.add_recipe "git"
    chef.add_recipe "rvm"
    chef.add_recipe "java"
    chef.add_recipe "nodejs"
    chef.add_recipe "play"


    chef.json = {
    :java => {
        :jdk_version => "7",
        :install_flavor => "openjdk"
      },
    :rvm => {
        :user_installs => [
           {
              :user => "vagrant",
              :default_ruby => "1.9.3-dev",
              :rubies => ["1.9.3-dev"],
              :global_gems => [
                  { :name => 'rubyzip' },
                  { :name => 'compass' }
              ]                  
           }
        ]
      },
      :play2 => {
        :version => "2.2.1"
      },
      :nodejs => {
        :version => "0.10.25",
        :npm => "1.3.24"
       }
    }
  end
  config.vm.provision :shell, :inline => "date -R > /vagrant/vagrant_provisioned_at"
  config.vm.provision :shell, :inline => "npm install -g yo grunt-cli bower"
  config.vm.provision :shell, :inline => "chown -R vagrant:vagrant /usr/local/play/"
end

Now we are starting an adult swim. The 'date -R' thing was a great idea that allowed me to see on my local folder the last time provisioning had run. Something in this setup violates chefs idempotent mantra, so I might go back and figure it out. Also we needed to chown play because we are gonna try like heck to run this as vagrant user.

Once this is setup checkout this plugin project: https://github.com/tuplejump/play-yeoman We are gonna use this setup to wire the 2 frameworks together. There are many ways this can be done for custom use, but this is all basic proto-typing right now.

I checked out that project in a folder called 'sbt-plugins' but you can do whatever. We want to compile it tho, as the vagrant user. So I created an sbt script todo this outside of play (otherwise we get into a bit of chicken and egg issue):

SBT_OPTS="-Xms512M -Xmx1536M -Xss1M -XX:+CMSClassUnloadingEnabled -XX:MaxPermSize=256M"
PATH_OPTS="-Dsbt.global.base=/vagrant/.sbt -Dsbt.ivy.home=/vagrant/.ivy2 -Dsbt.boot.directory=/vagrant/.sbt/boot"
java $SBT_OPTS $PATH_OPTS -jar /usr/local/play/play-2.2.1/framework/sbt/sbt-launch.jar

2 important points here:

• it's critical that we use the sbt that came with play, since this version needs to match sbt and scala libraries
• I located the compiled libraries under my project to make it easy to delete them, there should be no harm in them being under vagrant user...it just might be a bit confusing

Now for the fun part. npm install your favorite yo generator. I did the 'generator-angular'. Then run it from play. Wait what? Yes thats what I said, start your play project (create a new one if you don't have one), then run 'yo angular'.

What this will do is create a separate folder called 'ui'. All of your node/angular project stuff will be here, and your app will be under 'ui/app'.

Now there's alot to fix. I'm gonna run quickly through these while its fresh in my mind:

• I was missing SASS from the earlier Ruby install, probably can add to Vagrantfile and let chef handle it, but:

sudo gem install bootstrap-sass

• next update the Gruntfile.js to put the tempfiles in tmp and not in the project, just file this bit:

sassDir: '.tmp/sass-styles',

• update angular, I went to 1.2.13, bower will happily do this for you
• karma is seriously messed up, mainly because running on vagrant means no chrome, we need to get it working with PhantomJS. I ended up just making my own karma.conf.js

module.exports = function (config) {
  config.set({
    basePath : '../',

    logLevel: config.LOG_DEBUG,

    // Fix for "JASMINE is not supported anymore" warning
    frameworks : ["jasmine"],

    files : [
      'ui/app/bower_components/angular/angular.js',
      'ui/app/bower_components/angular/angular-*.js',
      'ui/app/bower_components/angular-mocks/angular-mocks.js',
      'ui/app/bower_components/angular-cookies/angular-cookies.js',
      'ui/app/bower_components/angular-resource/angular-resource.js',
      'ui/app/bower_components/angular-sanitize/angular-sanitize.js',
      'ui/app/bower_components/angular-route/angular-route.js',
      'ui/app/bower_components/angular-bootstrap/ui-bootstrap.js',
      'ui/app/scripts/app.js',
      'ui/app/scripts/controllers/*.js',
      'ui/test/spec/**/*.js'
    ],

    autoWatch : true,

    browsers : ['PhantomJS'],

    junitReporter : {
      outputFile : 'test_out/unit.xml',
      suite      : 'unit'
      //...
    }
  });
}

I think thats all. I'll run back through it tomorrow. One note, the current setup for play-yeoman allows you to specify play routes the normal way in th eplay app. Or you can put Scala templates in your angular, just be sure to:

• put them under a directory called 'views'
• the route needs a '/ui/' so it can properly find angular libraries

####Creds

• https://github.com/tuplejump/play-yeoman
• https://github.com/njin-fr/play2.git
• https://github.com/fnichol/chef-rvm

fin