Using grunt-contrib-connect - open page URL with added context path

Question

I have set up grunt connect like this:

connect: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost'
    },
    livereload: {
        options: {
            open: true,
            base: [
                'app'
            ]
        }
    }
}

That works great - loads my index.html page as:

http://localhost:9000

However, to keep this consistent with how it will be loaded in production, I would like it to load it with additional context path added, like:

http://localhost:9000/myappcontext/secured

Can this be done simply with grunt-contrib-connect? Or do I need to add some other proxy/middleware?

Anyone got a simple example of this type of set-up?

Answer 1

Yes you can do this without much trouble, just configure the open option:

connect: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost'
    },
    livereload: {
        options: {
            open: {
                 target: 'http://localhost:9000/myappcontext/secured'
            },
            base: [
                'app'
            ]
        }
    }
}

You can consult the README for more information about the available options.

Answer 2

You can use Rewrite middleware rules to load from a different context-root https://github.com/viart/http-rewrite-middleware

This would work in your scenario:

    var rewriteModule = require('http-rewrite-middleware');
    middlewares.push(rewriteModule.getMiddleware([
        //Load App under context-root of 'myappcontext/secured'
        {from: '^/myappcontext/secured(.*)$', to: '/$1'},

        //Redirect slash to myappcontext/secured as convenience
        {from: '^/$', to: '/myappcontext/secured', redirect: 'permanent'},

        //Send a 404 for anything else
        {from: '^/.+$', to: '/404'}
    ]));

Answer 3

I have one stupid method, but it's a method !

    copy: {
        "mount-server": {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: './.mount-server/myappcontext/secured/',    // your expected path here
                src: [
                    '**/**'
                ]
            }]
        }
    }

    open: {
        server: {
            path: 'http://localhost:9000/myappcontext/secured/index.html'
        }

    }

    connect: {
        options: {
            port: 80,
            // change this to '0.0.0.0' to access the server from outside
            hostname: null
        },
        livereload: {
            options: {
                middleware: function (connect, options) {
                    return [
                        lrSnippet,
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, "./.mount-server/")
                    ];
                }
            }
        }
    }

    grunt.registerTask('prepareServer', [
        "clean:mount-server",
        "copy:mount-server"
    ]);

    grunt.registerTask('server', function (target) {

        grunt.task.run([
            'concurrent:server',
            'prepareServer',
            'connect:livereload',
            'open:server',
            'watch'
        ]);
    });

Answer 4

With this being a fairly dated post, I thought I'd share what I had to do since some of the libraries are out of date with even the libraries referenced. Also this shows the entire process, rather than piecemealing the comments.

The example in the library https://github.com/viart/grunt-connect-rewrite is using a very dated version of grunt-contrib-connect

From version 0.11.x, the new grunt-contrib-connect does not support connect.static and connect.directory. You need to use another library serve-static

var rewriteRulesSnippet = require('grunt-connect-rewrite/lib/utils').rewriteRequest,
    serveStatic = require('serve-static');

connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: true //default port is 35729
    },
    rules: [
        { from: '^/yourfolder/(.*)$', to: '/$1' }
    ],
    server: {
        options: {
            base: './app', //where the files are served from
            open: {
                 target: 'http://localhost:9000/yourfolder'
            },
            middleware: function(connect, options) {
                return [
                    rewriteRulesSnippet, // RewriteRules support
                    serveStatic(options.base[0]) // new library used here
                ];
            }
        }
    }
}