How do I set the element for a grunt build?

Question

The final app I'm building will live at /subdirectory on a server.

Setting html5mode to true for angularjs so I lose the # sign works fine. But I also need to set

<base href="/subdirectory/"></base>

During development, I can't have the 'base' element set as when I run grunt serve the server cannot find most of the files.

What is the best way to develop and then maybe set the 'base' element when I do a grunt build ?

Thanks.

score 6 · Answer 1 · answered Jun 10 '15 at 04:15

I used the grunt task usemin:

index.html

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

Gruntfile.js

usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    options: {
        dirs: ['<%= yeoman.dist %>'],
        blockReplacements: {
            base: function (block) {
                return ['<base href="', block.dest, '">'].join('');
            }
        }
    }
}

Basically I defined a custom build block named base and this way it's using "" during development (or whatever you set there) and for production the value from the build block config.

score 0 · Answer 2 · edited May 23 '17 at 12:17

Please read here. I avoid using base tag. To solve the problem you have (which I also had) please do two things:

In index.html specify all js/css path as relation to index.html path, so it works in both prod/dev

write an http interceptor which while loading html/api calls append the base to the url

myapp.factory('MyHttpInterceptor',[ "$log", function ($log) {

    var requestInterceptor = function (config) {
        var prefix = document.location.pathname.substring(0, document.location.pathname.length - 1);
        if (config.url.indexOf(".html") !== -1) {
            config.url = prefix + config.url;
        }
        if (config.url.indexOf("/api/") !== -1) {
            config.url = prefix + config.url;
        }
        return config || $q.when(config);
    };

    return {
        request: requestInterceptor,
    };
}
  ]);

score -1 · Answer 3 · answered Oct 25 '14 at 07:45

-1

Use in inside head tag <base href="/your MainDomain Name">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <base href="/your MainDomain Name">
</head>

answered Oct 25 '14 at 07:45

Harutyun Abgaryan

2,013
1
12
15

Yes thanks I understand where to put the 'base' tag. I just cannot have it there during development as running grunt serve then fails to load the app. – magician11 Oct 25 '14 at 08:01
@magician11 Can you please help me in resolving this? I am unable to add the following in my index.html at dist folder : after tag – Smitha Jul 29 '15 at 06:00

How do I set the element for a grunt build?

3 Answers3