Set base URL in angularjs project based on the environment

Personally I prefer to set it a build/serve time, so I don't need to change the code when I change environment.

So, I can push on the server and use grunt serve:production - you don't need to change the code, so you can use git hooks and a bash script to easily serve your code.

To achieve this in Grunt you can use ngcostant. You define the vars you want, and it creates a file named config.js (or whatever you want) that exposes your vars under ENV (or whatever you want) using .configure()

Talking about your case, you can have something like this in your Gruntfile:

ngconstant: {
  options: {
    space: ' ',
    wrap: '"use strict";\n {%= __ngModule %}',
    name: 'config'
  },
  vagrant: {
    options: {
      dest: 'app/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'vagrant',
        baseUrl: 'http://192.168.33.99/api/v0',
      }
    }
  },
  test: {
    options: {
      dest: 'app/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'test',
        baseUrl: 'http://test.example.com/api/v0',
      }
    }
  },
}

Then, in your app you can take the baseUrl using ENV.baseUrl and expose to your html file, like this (angular):

app.run(function($rootScope, ENV.baseUrl){   
    $rootScope.baseUrl = config.baseUrl;
});

(html)

<base ng-href="{{baseUrl}}">

So you can serve your application using grunt serve:vagrant when you're using vagrant or grunt serve:test when you want to run on your test server

Try with grunt template package:

Template strings can be processed manually using the provided template functions.

This package offers default delimiters ie. <%= placeholder %> to replace variable values in placeholder given a that you are using Grunt.

Another package, grunt-processhtml provides processes html with special comments:

<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->

Example on how to use with in HTML file:

<!-- build:remove:staging,prod -->
  <base href="/app/public/" target="_blank" />
<!-- /build -->

And on production you could do the following:

<!-- build:[href] a/b/c -->
  <base href="/app/public/" target="_blank" />
<!-- /build -->

<!-- will be changed to -->
<base href="a/b/c/" target="_blank" />

My approach was to not include any other dependencies at all (yeoman has enough already). I simply used the blockReplacement feature of usemin and added a dev target to my build task.

This allows me to use grunt build for production distribution, grunt build:dev for development distribution (remote) and grunt serve for normal local development.

In my html:

<!-- build:baseUrl /somepath/ -->
<base href="/">
<!-- endbuild -->

In my Gruntfile.js:

...

var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist',
    dev: false // added dev boolean at ~ line 22
};

...

assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],

    // added blockReplacements at ~ line 250
    blockReplacements: {
        baseUrl: function (block) {
            if (appConfig.dev) {
                return ['<base href="', block.dest, '">'].join('');
            }
        }
    }

...

// Altered the default build task to accept a target
grunt.registerTask('build', 'Compile the code base for distribution', function (target) {
    if (target === 'dev') {
        appConfig.dev = true;
    }

    grunt.task.run([
        'clean:dist',
        'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin'
    ]);
});