Using a fallback code in case bootstrap's cdn is down

I have seen some code written for a fallback but did not understand how it work, and was wondering if there was a an easier way to write fallback code or if not using the complicated fallback code, and if anyone willing maybe break it down for someone who is still new to this.(I didn’t want to ask any where else due to unfriendly behavior to someone as new as i am)

Can you point us to what you’re talking about?

I would handle it this way:

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<!-- Local fallback -->
<script>
  if (! $.fn.modal) {
    document.write('<script src="/js/bootstrap.min.js"></script>');
    document.write('<link rel="stylesheet" href="/css/bootstrap.min.css">');
  }
</script>

First, in line 2 and 4, we include the JS and CSS from the CDN in your document’s head section. If, for some reason, the CDN isn’t available, the local fallback below will take part.

In the if condition, we are checking for the absence of Bootstrap. Bootstrap’s JavaScript is based on jQuery and extends the jQuery object, so if Bootstrap loaded correctly the $.fn.modal object is present in our document. If not, this means that for some reason Bootstrap didn’t load from the CDN. So, if the condition evaluates to true we will write two lines of code in the document’s head: 1 to load the the JavaScript locally and 1 to load the CSS locally. You should change the file path’s accordingly.

But in general this shouldn’t be necessary as the common CDNs are very reliable and should never fail. Of course there are exceptions but, but I have never heard about any problems with CDNs.

3 Likes

In this instance are you saying you’ll link to the CDN but you’ll have a local copy of the minified files in case the CDN goes down?

This would be necessary, yes.

Is linking to the CDN preferable to the local files?

In most situations, I would say yes. There are a few benefits having resources loaded from a CDN:

  • Cache. Many websites share the same libraries like jQuery. So, if a different website uses jQuery from a CDN it get’s cached on user’s computer. If the same user visits your website which uses the same CDN, the browser doesn’t need to fetch the same file again because it is already cached.
  • Performance. A CDN usually has better performance than your hosting environment, also it’s globally distributed on many servers.
  • Ease of use. Just copy the link into your HTML and you’re done. Don’t have to download the files first. Also, updating is much easier, just switch the version number in the link.
  • Reduced traffic on your website

There are a few more, but for me personally these are the greatest benefits.

3 Likes

In addition to what @andreasremdt mentioned

  • Parallel downloads - the browser can download multiple files from multiple resources concurrently, resulting reduced download overall time
  • Location/Proximity - CDN are usually distributed, so the closest location to the user are used for their download
  • Always the latest version - 2, 3 yrs down the road, your site will still be serving the latest JS/CSS file versions. No manual maintenance/upkeep to what the latest version is.
1 Like

This, however true, is still an assumption. The most important factor that may cause these scripts to not load is if your user is behind a proxy that blocks CDNs (for whatever reason). This will cause your network request to load the script (and link) to fail. Therefore these fallback mechanisms are a necessity.

It may not be the problem with CDN, but with network. And we are not even talking about some nefarious agents looking forward to bring the common infrastructure down. You wouldn’t want something like that to bring your site down, would you? :wink:

Thank you for your detailed break down, i have one more question on the solution, in the script where you are checking to see if $.fn.modal is present, if it isn’t then how does the script know to put it in the < head > tag or do you normally write a small script inside of the html document that is not in your js file?

@adityaparab
Yes, that can definitely happen. I never ran into a situation like this, but you are absolutely right :slight_smile:

@baltz1
You have to put the code into the head of your HTML document, it then inserts the two lines in the head. If you would put the code into your body, it inserts the two lines into the body.

I have one more question that i came across that i hope you can answer. So if bootstrap cdn goes down for some reason is that for both the css cdn and js cdn file? or is it possible that only one of the files like the css or the js could go down, or is it even likely that could happen? Also is it standard to put fallback code in the html document rather then a .JS file

Well, if the CDN itself is down, both and JS and CSS would fail to load. I can’t imagine a reason why only one of the two should fail, besides a configuration in your network (for example if your proxy server is blocking JavaScript).

Also is it standard to put fallback code in the html document rather then a .JS file

I’m not sure if I understand that question… You could also put the code into a separate JS file and load it into your head, but I think it’s best to leave it as it is. It’s a tiny bit of code and you save yourself a request made to the server for the JS file :slight_smile:

1 Like