Set base URL in angularjs project based on the environment

问题

I'm working on an AngularJs project created using Yeoman. The project uses Grunt as task manager.

In my index.html I need to set the base url:

<base href="/">

The href attribute value depends on the environment: if the environment is development I want href to be simply /, if the environment is production the value has to be something else a/b/c.

What are the available solutions to this problem?

It is possible to set it dynamically at runtime using a constant from AngualrJs or it is better to set it statically at build/serve time?

回答1:

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

回答2:

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" />

回答3:

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

来源：https://stackoverflow.com/questions/30048621/set-base-url-in-angularjs-project-based-on-the-environment

标签

javascript

angularjs

base-url