Adding grunt-connect-proxy to generator-angular gruntfile.js

Question

I am trying to add grunt-connect-proxy to my gruntfile.js in the yoman generator angular project (generator-angular 0.15.1), but I can’t get it to work since the way it wrote changes and I am inexperienced in that how Grunt works.

I read a lot of posts about this, and none of them are particularly relevant, and the grunt file seems to often change in the way it implements the middleware for working with the pen. This makes it impossible to work with the document for grunt-connect-proxy.

The hard part is under the loading line.

Here's what it looks like in an angular gruntfile generator:

// 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: 8080, https: false, xforward: false }], livereload: { options: { open: true, // --- how the code looks like before I do anything 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) ]; } } }, ... 

When I look at the documentation, it looks like this:

  livereload: { options: { middleware: function (connect, options) { if (!Array.isArray(options.base)) { options.base = [options.base]; } // Setup the proxy var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest]; // Serve static files. options.base.forEach(function(base) { middlewares.push(connect.static(base)); }); // Make directory browse-able. var directory = options.directory || options.base[options.base.length - 1]; middlewares.push(connect.directory(directory)); return middlewares; } } } 

Can someone help me translate the documentation into a new way of writing a piece of middleware?

Thanks!!

Answer 1

So, I got some help, and here is how it was solved:

  livereload: { options: { open: true, middleware: function(connect) { var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest]; return middlewares.concat( connect.static('.tmp'), connect().use('/bower_components', connect.static('./bower_components')), connect().use('/app/styles', connect.static('./app/styles')), connect.static(appConfig.app) ); } } } 

Hope this helps someone else too.