Grunt-Connect-Proxy Gruntfile.js

(connect)Gruntfile.js

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      proxies: [
        {
          context: '/api',
          host: 'localhost',
          port: 3000
        }
      ],
      livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      test: {
        options: {
          port: 9001,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },
      dist: {
        options: {
          open: true,
          base: '<%= yeoman.dist %>'
        }
      }
    },

(loadNpmTasks)Gruntfile.js

module.exports = function (grunt) {

  //load grunt-connect-proxy
  grunt.loadNpmTasks('grunt-connect-proxy');

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  };

(register task) Gruntfile.js

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

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer:server',
      'configureProxies',
      'connect:livereload',
      'watch'
    ]);
  });

chrome network response

Remote Address:127.0.0.1:9000
Request URL:http://localhost:9000/articles
Request Method:GET
Status Code:404 Not Found

grunt serve --verbose console

Running "configureProxies" task
Proxy created for: /api to localhost:3000

Running "connect:livereload" (connect) task
Verifying property connect.livereload exists in config...OK
File: [no files]
Options: protocol="http", port=9000, hostname="localhost", base=".", directory=null, keepalive=false, debug=false, livereload=35729, open, useAvailablePort=false, onCreateServer=null, middleware=undefined
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...
Verifying property watch exists in config...OK
Verifying property watch.bower.files exists in config...OK
Verifying property watch.js.files exists in config...OK
Verifying property watch.jsTest.files exists in config...OK
Verifying property watch.styles.files exists in config...OK
Verifying property watch.gruntfile.files exists in config...OK
Verifying property watch.livereload.files exists in config...OK
Live reload server started on port: 35729
Watching bower.json for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app/scripts/app.js for changes.
Watching app/scripts/controllers for changes.
Watching app/scripts/controllers/main.js for changes.
Watching test/spec/controllers/main.js for changes.
Watching app/styles/main.css for changes.
Watching Gruntfile.js for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app/404.html for changes.
Watching app/images for changes.
Watching app/scripts for changes.
Watching app/styles for changes.
Watching app/views for changes.
Watching app/index.html for changes.
Watching app/views/main.html for changes.
Watching .tmp/styles/main.css for changes.
Watching app/images/yeoman.png for changes.

routes.rb

Rails.application.routes.draw do
  namespace :api, defaults: {format: "json"} do
    resources :articles
  end
end