How do I configure grunt-connect-proxy with grunt serve? - node.js

Question

I managed to configure grunt to serve my application, but since it serves on localhost:9000, my api calls also go to port 9000 while my api is at port 3000, resulting in a 404 error.
After some research, I've decided I need to use grunt-connect-proxy to proxy my api calls to the right port. I've been beating my head against a wall going through every article, stack overflow question and the documentation, but I can't seem to get the configuration right. See my gruntfile below. Any help will have my undying gratitude.
// Invoke 'strict' JavaScript mode
'use strict';
module.exports = function(grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
paths: ['public/styles/less']
},
files: {
"public/styles/css/main.css": "public/styles/less/main.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['public/styles/less/*.less'],
tasks: ['less'],
options: {
nospawn: true
}
}
},
connect: {
server: {
options: {
port: 8000,
base: 'public',
logger: 'dev',
hostname: 'localhost',
middleware: function (connect, options, defaultMiddleware) {
var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
return [
// Include the proxy first
proxy
].concat(defaultMiddleware);
}
},
proxies: [
{
context: '/',
host: '127.0.0.1',
port: 3000,
https: false,
xforward: false,
headers: {
"x-custom-added-header": 'value'
},
hideHeaders: ['x-removed-header']
}
]
},
serve: {
options:{
port: 9000,
hostname: "127.0.0.1",
middleware: function(connect, options) {
return [
require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
connect.static(options.base[0])
];
}
}
}
},
open: {
serve: {
path: 'http://localhost:<%= connect.serve.options.port%>/public'
}
},
regarde: {
serve: {
files:['public/index.html','public/script/*.js','public/script/**/*.js','public/styles/**/*.css','public/styles/less/*.less','public/views/*.html'],
tasks: ['livereload']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-clean');
//grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-connect-proxy');
grunt.registerTask('serve',['less','livereload-start','connect:serve','open:serve','regarde:serve']);
grunt.registerTask('server', function (target) {
grunt.task.run([
//'clean:server',
//'compass:server',
'configureProxies:server',
'connect:server',
'watch'
]);
});
};