Grunt connect with base html tag

Question

I am developing an angularjs site for someone and the site they are going to put it on is something like this

http://domain.com/newsite

So to get my links to work I added the following in the head tags to get the links to work in production

<base href="/newsite/" />

But now when I use grunt connect, nothing works because of that base element. I guess, when I am locally working I could comment it out but I would be concerned I would forget to put it back. Thanks for any tips.

Here is part of my grunt file

connect: {
        server: {
            options: {
                port: '9001',
                base: 'build/',
                protocol: 'http',
                hostname: 'localhost',
                livereload: true,
                open: {
                    target: 'http://localhost:9001',
                    callback: function() {}
                },
            }
        }
    },
    watch: {
        files: [
            '<%= app.root %>**/*',
            'Gruntfile.js'
        ],
        tasks: [ 'copy', 'less:dev' ],
        options: {
            reload: false,
            livereload: true,
            spawn: true
        }
    }

Posts I checked that did not give me any answers:

grunt-connect: serve files with base url added

Did you try something like this: ` livereload: { options: { open: 'myapp.dev:9000/newsite', base: [ '.tmp', '<%= yeoman.app %>' ] }` — bpaul

bpaul bpaul · Accepted Answer · 2014-12-01T18:50:23

I would change the livereload part of your server options to something like the following:

connect: {
    server: {
        options: {
            port: '9001',
            base: 'build/',
            protocol: 'http',
            hostname: 'localhost',
            livereload: true,
            open: 'http://localhost:9001/newsite/'
        }
    }
},

Grunt connect with base html tag

1 Answers