Develop Reference

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

I'm trying to add grunt-connect-proxy to my gruntfile.js in a yeoman generator-angular project (generator-angular 0.15.1) but I can't seem to get it to work since the way it's written changes and I'm inexperienced in how Grunt works.
I've read many posts about this and none are particularly up-to-date, and the gruntfile changes seemingly often in how it implements livereload middleware This makes the documentation for grunt-connect-proxy to not work in my case.
The tricky part is under livereload
This is how it looks in generator-angular gruntfile:
// 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 to the new way of writing the middleware part?
Thanks!!

So I got some help and this 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.

Gruntfile : livereload doesn't work

I got nothing wrong in the terminal but Chrome doesn't answer to change on my html files and don't automatically reload the page.
I include 'livereload.js' in my index.html but i'm not sure if it's required.
Thanks for your help.
module.exports = function(grunt) {
// Load Grunt tasks declared in the package.json file
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Configure Grunt
grunt.initConfig({
// Grunt express - our webserver
// https://github.com/blai/grunt-express
express: {
all: {
options: {
bases: ['/Users/antoine/Dropbox/prog/projets/antoine/'],
port: 8080,
hostname: "localhost",
livereload: true
}
}
},
// grunt-watch will monitor the projects files
// https://github.com/gruntjs/grunt-contrib-watch
watch: {
all: {
files: '**/*.html',
options: {
livereload: true,
interval: 1500,
}
}
},
// grunt-open will open your browser at the project's URL
// https://www.npmjs.org/package/grunt-open
open: {
all: {
path: 'http://localhost:8080/index.html'
}
}
});
// Creates the `server` task
grunt.registerTask('server', [
'express',
'open',
'watch'
]);
};

grunt-contrib-connect ignores task options

I have configured grunt-contrib-connect but the server did not stay alive:
package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
}
}
Grundfilesnippet:
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
port: 9000,
base: 'src/main/webapp',
keepalive: 'true'
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('server', function () {
grunt.task.run([
'connect'
]);
});
When running task "server" the server start and stops, ignoring the options:
Running "server" task
Done, without errors.
But changing the config like:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
abc:{
options: {
port: 9000,
base: 'src/main/webapp',
keepalive: 'true'
}
}
}
});
Makes the task run "connect:abc" and take the options.
Why the task default options are ignored?
Running "server" task
Running "connect:abc" (connect) task
Waiting forever...
Started connect web server on http://0.0.0.0:9000

in your first example your config just has no target, in your second it has a target "abc".
adding a target should probably work, and i think the target could even be empty!:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
port: 9000,
base: 'src/main/webapp',
keepalive: true
},
abc: {}
}
});

LiveReload with Grunt?

I've consulted this answer as a starting point, in addition to the watch github page.
My watch task looks like this:
watch: {
less: {
files: ['less/**/*.less'],
tasks: ['less'],
options: {
livereload: true
}
},
handlebars: {
files: ['templates/**/*.hbs'],
tasks: ['handlebars'],
options: {
livereload: true
}
}
}
First I tried with the browser extension, and then later I added this script (and verified that it is loaded) in my index.html
<script src="//localhost:35729/livereload.js"></script>
I also tried adding this to my watch js:
livereload: {
files: ['dev/**/*'],
options: {
livereload: true
}
}
I also have a connect task, and I've tried running grunt with or without it to no avail.
connect: {
dev: {
options: {
port: 35729
}
}
}
And still no live-reload...

this is my Gruntfile.js and my connect version is 0.9.0, this config can use for different livereroad port
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
watch: {
demo: {
files: ['web/*.*'],
options: {
livereload: 5000
}
},
dev:{
files: ['web1/*.*'],
options: {
livereload: 3030
}
}
},
connect: {
demo: {
options: {
base: "web",
port: 1111,
hostname: '*',
livereload: 5000,
open: {
target: 'http://127.0.0.1:1111'
}
}
},
dev:{
options: {
base: "web1",
port: 2222,
hostname: '*',
livereload: 3030,
open: {
target: 'http://127.0.0.1:2222'
}
}
}
}
})
grunt.registerTask('demo', ['connect:demo', 'watch:demo']);
grunt.registerTask('dev',['connect:dev','watch:dev']);
}

Does this work?
watch: {
options: { livereload: true },
less: {
files: ['less/**/*.less'],
tasks: ['less']
},
//...
}
Also try running in verbose mode (grunt do-something -v) to check that the livereload server starts and that the port is correct.

Watch has worked for me out of the box, without livereload. Have you tried removing the livereload options and the script include?
Then: grunt; grunt watch
(the default task does the build, then watch keeps an eye out for changes)

Grunt problems with proxies - Gruntjs

I have been working all day on trying to get my proxies set up in my Gruntfile. Here is my Gruntfile:
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
module.exports = function(grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
connect:{
livereload: {
options: {
middleware: function (connect) {
return [proxySnippet];
}
}
},
options: {
port: 9000,
base: 'app',
keepalive: true,
livereload: true
},
proxies: [
{
context: '/public/api',
host: 'localhost',
port: 8182,
https: false,
rewrite: {
'^/public/api': ''
}
}
]
}
});
grunt.registerTask('server', ['less', 'configureProxies', 'connect', 'connect', 'watch', 'open:dev']);
};
When I run my grunt server I can only hit my proxy. If I try to just hit anything other than the proxy I get a 404. What is giving me this issue?

I also had a lot of trouble setting up a proxy using grunt-connect-proxy.
Digging in the source code of grunt-contrib-connect, I realized that it uses the nodeJs Connect framework behind the scene.
Internally the middleware option defaults to this function:
function (connect, options) {
var middlewares = [];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
var directory = options.directory || options.base[options.base.length - 1];
options.base.forEach(function (base) {
// Serve static files.
middlewares.push(connect.static(base));
});
// Make directory browse-able.
middlewares.push(connect.directory(directory));
return middlewares;
}
Which basically adds the connect.static and the connect.directory middlewares to an array passed to the connect(middlewares) constructor.
Knowing that, we can make use of the proxy-middleware nodeJs package like this:
connect: {
server: {
options: {
port: 9002,
keepalive: true,
middleware: function (connect, options) {
// Proxy all requests to target the local application.
var proxyOptions = require('url').parse('http://localhost:8080/');
proxyOptions.route = '/api';
return [
require('proxy-middleware')(proxyOptions), // Include the proxy first.
connect.static(options.base), // Serve static files.
connect.directory(options.base) // Make empty directories browse-able.
];
}
}
}
}
Basically we are adding a middleware to the middleware array.
This new proxy middleware will translate any incoming request like http://localhost:9002/api/ into http://localhost:8080/