Yeomanのgenerator-angularとRailsの組み合わせでの開発環境構築

JavaScript Rails Ruby

grunt-connect-proxyを使って、rails server と、grunt serve の2つを叩いてLiveReloadで開発出来るようにしようという話。
あとフロント側をビルドするとRailsのpublicディレクトリに静的ファイルとして配備するように。

RailsのAsset PipelineにAngularJSを載せるんじゃなくて、サーバーサイド(Rails)とクライアントサイド(AngularJS)を分離しての開発の話。

こういう事↓
理想的な Rails, AngularJS 環境の構築 - ボクココ

前提

Railsアプリ作成して、apiのnamespaceでAPIを作成済み、Railsアプリのルートにngappとかディレクトリ作って、yo angular --coffee でフロントエンド部を生成済みとする。*1

作業

% cd ngapp
% npm install -D grunt-connect-proxy

# Gruntfile.coffee

"use strict"

proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest
# ↑追加

module.exports = (grunt) ->

  require("load-grunt-tasks")(grunt)

  require("time-grunt")(grunt)

  # Configurable paths for the application
  appConfig =
    app: require("./bower.json").appPath or "app"
    dist: "../public"  # ←修正. railsのpublicをdistに

  # Define the configuration for all the tasks
  grunt.initConfig

  # Project settings
    yeoman: appConfig

# ................................省略.................................

    connect:
      options:
        port: 9000

      # Change this to '0.0.0.0' to access the server from outside.
        hostname: "localhost"
        livereload: 35729

      livereload:
        options:
          open: true
          middleware: (connect) ->
            [
              proxySnippet  #<- 追加
              connect.static(".tmp")
              connect().use("/bower_components", connect.static("./bower_components"))
              connect.static(appConfig.app)
            ]
      proxies: [      #<- proxies: [...] 追加
        context: '/api'
        host: 'localhost'
        port: '3000'
      ]
 
# ................................省略.................................     

  grunt.registerTask "serve", "Compile then start a connect web server", (target) ->
    if target is "dist"
      return grunt.task.run([
        "build"
        "connect:dist:keepalive"
      ])
    grunt.task.run [
      "clean:server"
      "wiredep"
      "concurrent:server"
      "configureProxies"  #<- 追加
      "autoprefixer"
      "connect:livereload"
      "watch"
    ]

# ................................省略.................................   

% bundle exec rails server

% grunt serve

これで、localhost:9000/にアクセスするとフロント側、localhost:9000/apiがRailsのAPI側に*2。
APIとは別に、管理系とかを普通にRailsアプリとして作って同じプロジェクト上にある場合は、Railsのお作法に則り、localhost:3000/下にアクセスでいいと思う。

ビルドは,--forceを忘れずに

grunt build --force

2014/8/23追記

Vagrantの場合↓ Yeomanのgenerator-angularで作ったプロジェクトをVagrant環境で開発する場合の設定 - 仙台 Ruby Vim JavaScript 社長

参考

*1:generator-angular

*2:localhost:9000/apiがRailsのrootという意味ではありません