• OS:Windows 7 64bit
  • サーバーサイド:Ruby on Rails 4.0.2
  • フロントサイド:Yeoman, Grunt, bower

nodejs を公式のインストーラでインストール.

npm で Yeoman, Grunt, bower, generator-angular をインストール:

npm install -g yo grunt-cli bower generator-angular

Ruby on Rails のルートに ngapp フォルダを作成し,

yo angular

リバースプロキシ用モジュール grunt-connect-proxy をインストール:

npm install -D grunt-connect-proxy

Grunt の設定ファイル Gruntfile.js を編集(青色部分を追加・変更):

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {

    grunt.initConfig({
        yeoman: {
            app: require('./bower.json').appPath || 'app',
            dist: '../public'
        },
        connect: {
            options: {
                // 省略 
            },
            livereload: {
                options: {
                    // 省略 
                    middleware: function (connect) {
                        return [
                            proxySnippet,
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, 'app')
                        ];
                    }
                }
            },
            proxies: [
                {
                    context: '/api',
                    host: 'localhost',
                    port: '3000',
                    https: false,
                    changeOrigin: false
                }
            ],
            // 省略 
        },
        // 省略 
    });


    grunt.registerTask('serve', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            'bower-install',
            'concurrent:server',
            'configureProxies',
            'autoprefixer',
            'connect:livereload',
            'watch'
        ]);
    });
    // 省略 
};

Ruby on Rails のテストサーバーを起動:

>rails s

Grunt サーバーを起動:

>grunt server

以上で, localhost:9000 が Yeoman, localhost:9000/api 以下が Ruby on Rails になります.