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?

were you using grunt-contrib-watch to handle the live reload? — Jon Harding, Nov 10 '16 at 16:49

score 10 · Accepted Answer · answered Jan 29 '14 at 10:01

10

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.

answered Jan 29 '14 at 10:01

Allan Kimmer Jensen

4,333
2
31
53

1

Thanks. Tried this, but it attempts to load my index.html file from the file system at /app/myappcontext/secured/index.html - but my index.html file is /app/index.html. Do I need to use connect-rewrite in conjunction with the above suggested set-up? – Steve Jan 29 '14 at 22:19
3

Seems it does need a rewrite. I managed to get this working following the example here: https://github.com/viart/grunt-connect-rewrite - with at rule like: { from: '^/myappcontext/secured/(.*)$', to: '/$1' } – Steve Jan 30 '14 at 00:23
Ah yes, it will host your index.html at the root unless you do something, if you mount a folder like I did, it wont be a problem. – Allan Kimmer Jensen Jan 30 '14 at 12:54

score 2 · Answer 2 · answered Sep 08 '14 at 18:58

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'}
    ]));

answered Sep 08 '14 at 18:58

Jeff Sheets

1,181
12
18

The new version seems to come with middleware. Can that be used somehow? https://github.com/gruntjs/grunt-contrib-connect/#middleware - Can't figure it out from the usage examples though. – Rhys May 15 '17 at 01:25
@Rhys yes, you could use that to write your own function to do the rewriting, but http-rewrite-middleware implements the specific rewrite functionality in a way that is easily reused. Middleware is just nodejs nomenclature for filtering of a request/response. You can see in the code how it works https://github.com/viart/http-rewrite-middleware/blob/master/index.js – Jeff Sheets May 16 '17 at 02:10

materliu · Answer 3 · 2014-04-03T03:39:35.793

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'
        ]);
    });

score 0 · Answer 4 · answered Nov 10 '16 at 20:33

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
                ];
            }
        }
    }
}

I tried this setup but it didn't seem to work unfortunately. I think the setup might have changed since. Server seems to be the parent then options. Not sure where to put rules. I have tried pretty much every combo but no luck yet. — Rhys, May 17 '17 at 03:08

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

4 Answers4