CODEWITHSUNDEEP
javascripthtml
Saliceran
Saliceran

Reputation: 350

How can I add the URL's root path to the paths of my JS files?

So, I have a web app that runs at localhost:XXXXX on my machine (where XXXXX is a port number), but in production it runs at webappurl.com/portal. The problem is that when I use relative paths for my JS files it thinks the root URL is just / and not /portal.

Is there a way for me to maybe check the root path, say using location.pathname, and then add that to the beginning of each of my JS file paths?

For example, take this

<script type="text/javascript" src="/Scripts/example.js"></script>

and change it to this

<script type="text/javascript" src="/portal/Scripts/example.js"></script>

I'd like to stay away from hard coding the root path, mainly because that's not best practices, but also because the root path is different in my dev environment and I don't want to have to constantly change the paths back and forth or to have to keep to separate files.

Upvotes: 0

Views: 546

Answers (3)

Michael Mikowski
Michael Mikowski

Reputation: 1279

While the 'base' element seems like it may be the answer, the problem is we are dealing with a case where the base is going to move around depending on the deployment environment. One solution is to boot-strap the script loading after the environment has been discovered. I use a similar approach in production:

<script>
  (function (){
    var
      // All the JS files we want to load
      script_list = [ 'foo.js', 'bar.js', 'bang.js' ],
      // Our JS directory
      script_base = '/js/', 
      doc_path    = document.location.pathname,
      base_list   = doc_path.split('/'),
      append_script_tag, base_path, i;

    // pop-off the document name from the location to
    // get the directory only        
    base_list.pop();
    base_path = base_list.join('/');

    // a handy script tag appender function
    append_script_tag = function ( script_url ) {
      var script_obj = document.createElement( 'script' );
      script_obj.src     = script_url;
      script_obj.charset = 'utf8';
      script_obj.type    = 'text/javascript';
      document.body.appendChild( script_obj );
    };

    // now loop through the list of js files and write the script tags
    for ( i = 0; i < script_list.length; i++ ) {
      append_script_tag( base_path + script_base + script_list[ i ] );
    }
  }());
</script>

Boom, you're done :)

Of course, relative paths are always better if you can swing it. But sometimes, you can't. For example, sometimes one uses local files for testing but a CDN in production. You might load different libraries depending upon the environment, and this approach is one way to determine the environment in use.

Cheers, and good luck!

Upvotes: 1

Onkel Toob
Onkel Toob

Reputation: 2212

Pathes with leading slashes are not relative but absolute. The / just points to the application's or site's root directory. You can modify this by using the base tag, see kmiklas answer for further information.

In your case it might be sufficient to just omit the leading slash, though.

Upvotes: 0

kmiklas
kmiklas

Reputation: 13433

Check out the base tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

It enables you to specify the base url for all of your relative file references.

Methinks that it will prove to be very helpful for you ;)

Upvotes: 0

Related Questions