Load External Script and Style Files in a SPA

Question

I have a type of SPA which consumes an API in order to fetch data. There are some instance of this SPA and all of them use common style and script files. So my problem is when I change a single line in those files, I will have to open each and every instances and update the files. It's really time consuming for me.

One of the approaches is to put those files in a folder in the server, then change the version based on the time, but I will lose browser cache if I use this solution:

<link href="myserver.co/static/main.css?ver=1892471298" rel="stylesheet" />
<script src="myserver.co/static/script.js?ver=1892471298"></script>

The ver value is produced based on time and I cannot use browser cache. I need a solution to update these files from the API, then all of the SPAs will be updated.

score 5 · Accepted Answer · answered Nov 25 '15 at 14:16

In your head tag, you can add the code below:

<script type="text/javascript">

        var xmlhttp = new XMLHttpRequest();
        var url = "http://localhost:4000/getLatestVersion"; //api path to get the latest version

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var tags = JSON.parse(xmlhttp.responseText);

                for (var i = 0; i < tags.length; i++) {

                    var tag = document.createElement(tags[i].tag);

                    if (tags[i].tag === 'link') {               
                        tag.rel = tags[i].rel;
                        tag.href = tags[i].url;
                    } else {
                        tag.src = tags[i].url;
                    }

                    document.head.appendChild(tag);
                }
            }
        };
        xmlhttp.open("POST", url, false);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send();

  </script>

Your api path should allow "CORS" from your website that handles the code above. And your api should return a json data like below:

var latestVersion = '1892471298'; //this can be stored in the database

var jsonData = [
    {
        tag: 'link', 
        rel: 'stylesheet', 
        url: 'http://myserver.co/static/main.css?ver=' + latestVersion
    }, 
    {
        tag: 'script', 
        rel: '', 
        url: 'http://myserver.co/static/script.js?ver=' + latestVersion
    }
];

//return jsonData to the client here

i have a follow up question, what happens when i need to implement some script only on part of the site and another on the rest of the site when using SPA? — ShlomyN, Dec 28 '22 at 08:01

score 0 · Answer 2 · answered Nov 21 '15 at 12:39

0

If you change anything in your JS or CSS then you have to update the browser cache, all you can do is to update that particular JS version not all of them, it should reflect in browser.

answered Nov 21 '15 at 12:39

Parshii

58
1
13

Yes I have to update their version, but the problem is there are more than 20 instances of the file, so I must change each instance. – Saman Gholami Nov 21 '15 at 19:31
Yup, automate the process. – Parshii Nov 23 '15 at 09:32

score 0 · Answer 3 · answered Nov 23 '15 at 11:37

0

How about adding a method in your API returning the files' last modified time and then inserting the value into the "src"/"href" attribute after the "ver="

answered Nov 23 '15 at 11:37

lvil

4,326
9
48
76

It's a really suitable solution, but the problem is how should I do that? the SPA is just an html file and some script and styles – Saman Gholami Nov 23 '15 at 11:51
You can add a script that makes an ajax call(s) to the API. The API returns you the number/timestamp of the last file(s) modification. Then you create the html tag (css /js – lvil Nov 23 '15 at 14:15

Load External Script and Style Files in a SPA

3 Answers3

Linked