Configure multiple servers with Grunt Connect and Livereload

Question

I'm trying to make a grunt connect task with 2 servers. While it is explained in documentation, I'm using livereload to start it and I can't make it work.

    connect : {
        proxies : [ {
            context : '/rest',
            host : 'localhost',
            port : 8080,
            https : false,
            changeOrigin : false,
            rewrite : {
                'rest' : 'paf/rest'
            }
        }, {
            context : '/logout',
            host : 'localhost',
            port : 8080,
            https : false,
            changeOrigin : false,
            rewrite : {
                'logout' : 'paf/logout'
            }
        } ],
        options : {
            base : 'build',
            port : 9000,
            hostname : '0.0.0.0'
        },
        livereload : {
            options : {
                middleware : function(connect) {
                    return [ proxySnippet, lrSnippet, mountFolder(connect, '../target/build') ];
                }
            }
        }
    }

To start my server, I use:

grunt.registerTask('server', [ 'configureProxies', 'connect:livereload', 'watch' ]);

My other server almost uses the same config, just replace "build" path by "bin". I tried to follow documentation with 2 servers declaration but then, I can't launch it properly.

    connect : {
        dev: {
            proxies : [ { ...}],
            options : { ... },
            livereload : {}
        },
        prod: {
            proxies : [ { ...}],
            options : { ... },
            livereload : {}
        }
    }


grunt.registerTask('serverDev', [ 'configureProxies', 'connect:dev:livereload', 'watch' ]);
grunt.registerTask('serverProd', [ 'configureProxies', 'connect:prod:livereload', 'watch' ]);

But then, it only calls connect:dev and not livereload. I have been thinking of multi-tasks for connect, but it seems complicated to set up.

Answer 1

The main issue is you have to ensure your connect/livereload ports don't clash between each setup.

Here is the simplest working example I've made:

'use strict';

module.exports = function (grunt) {

    require('time-grunt')(grunt);
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        connect: {
            options: {
                open: true,
                hostname: 'localhost'
            },
            first: {
                options: {
                    port: 8000,
                    livereload: 3500,
                    base: './'
                }
            },
            second: {
                options: {
                    open: {
                        target: 'http://<%= connect.options.hostname %>:<%= connect.second.options.port %>/two.html'
                    },
                    port: 8001,
                    livereload: 3501,
                    base: './',
                    index: 'two.html'
                }
            }
        },
        watch: {
            first: {
                options: { livereload: 3500 },
                files: ['style.css', 'index.html']
            },
            second: {
                options: { livereload: 3501 },
                files: ['style.css', 'two.html']
            },
        }
    });

    grunt.registerTask('default', [
        'connect:first',
        'watch:first'
    ]);

    grunt.registerTask('second', [
        'connect:second',
        'watch:second'
    ]);
};

However I've run into problems using more complicated connect setups (middleware etc.) Loosely the biggest hurdle I'm having is injecting the correct livereload port? I can't pinpoint it yet.

update

middleware + custom livereload port clobbering might be a known issue

From: https://github.com/gruntjs/grunt-contrib-connect/issues/65#issuecomment-59759233

Uuups, yes there is a reason for this behaviour. the connect-livereload middleware rewrites res.write, res.writeHead and res.end and stores the original versions.