0

I'm theming Bootstrap with custom styles, by using a local copy of the source SASS files as described on the official documentation, and importing them in a custom.scss file.

I'm mainly willing to customize the appearance, non the functionality; so, in example: colors, typography and the so-called "Sass options".

In this kind of scenario, are there any downsides or possible problems in importing the JS part of Bootstrap (I'm referring in particular to bootstrap.bundle.min.js) in my project by using a CDN instead of providing it from local?

EDIT: Please note that I'm not asking how loading a resource from CDN is different from loading it from local, I'm just asking if loading a part of Boostrap from CDN and another from local could lead to problems or unexpected behavior.

This is probably a silly question, I'm reasonably sure that I can do this without incurring in any problem, but I'd like to have some feedback from someone more expert than me.

Sekhemty
  • 1,222
  • 2
  • 13
  • 33
  • 1
    there is no point to load the js if all you need is the css. – hcheung Feb 13 '19 at 12:03
  • Possible duplicate of [Benefits vs. Pitfalls of hosting jQuery locally](https://stackoverflow.com/questions/3832446/benefits-vs-pitfalls-of-hosting-jquery-locally) - pretty much applies to all cdn hosting – Pete Feb 13 '19 at 12:05
  • @hcheung I need to *customize* only the CSS, but I also need to *include* the JS to be able to use the components (i.e. carousel, menu toggler button, etc.). – Sekhemty Feb 13 '19 at 12:09
  • @Pete Thank you for the reference; anyway, I think that my question is slighlty different, I'm not asking "how loading JS from a CDN is different form loading it locally", it is more like "it is possible to load some parts of Bootstrap from a CDN and other from local without incurring in problems?". – Sekhemty Feb 13 '19 at 12:13
  • So you do need JS. As for pros and cons of whether it should be loaded locally or via CDN, one of the benefits of using CDN is that because it is widely used by many software, the bootstrap via CDN is possible already cached at the user browser, and therefore load faster than via your local copy, and this will improve page loading and SEO. Having said that, personally I also seems some of the Google CDN were blacked in China which caused the site not been loaded properly, therefore the best practice is to have both local and CDN, with local as a backend. – hcheung Feb 13 '19 at 12:21
  • 1
    Your question is really badly worded and not sure what you are trying to do - even with the edit. If you are just asking if you can mix local files with files from a cdn, then yes it's possible. If you don't need any css then I would just not bother with it - if you are overriding the css, then I would just include the cdn css and then add an override file after - that way, if you need to upgrade bootstrap, you can just import new files (rather than wondering if your bespoke css will still work with the new bootstrap) – Pete Feb 13 '19 at 12:26

1 Answers1

0

If you can, you should host the JS yourself.

Since bootstrap uses integrity parameters in their example "how to use" code, you don't really have to be scared about cross site scripting attacks if their CDN is compromised (unless you leave them out in your code). The files will simply not be loaded. That is still however not something you want: If their CDN is compromised or their servers simply crash, you will not be able to load the JS anymore and parts of your app might become unusable.

You could, however, first attempt to serve from the cdn and if that's not possible give the user a local version. That way you can utilize the cache and be save when bootstrap servers go down. Here's a small excerpt taken from freecodecamp:

<script>
  if (! $.fn.modal) {
    document.write('<script src="YOUR JS LOCATION"></script>');
  }
</script>

You should put this underneath the line where you include the bootstrap CDN.

The code simply checks if a function from bootstrap is available and if not loads it from your local server.

DysphoricUnicorn
  • 495
  • 7
  • 16