0

I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder? Is there no program that can update and automatically drag them to the correct folder?

I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:

\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.

Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.

Folaht
  • 1,053
  • 1
  • 13
  • 32
  • I don't like w3schools. I don't trust w3schools. – Kai Jul 15 '17 at 05:47
  • 2
    You're being unclear? Firstly, all you have to do is put the file in a folder and link to it with a script tag, you don't have to install anything. Secondly, CDN's can generally be trusted, Google and MS hosts these scripts as a service. – adeneo Jul 15 '17 at 05:48
  • You can download the javascript files and reference them in your project. – Nisarg Shah Jul 15 '17 at 05:48
  • You can simply copy paste all the code from cdn to a javascript file and include this javascript file in the same way as you include other js files – Bharat Jul 15 '17 at 05:53
  • But is there no program that does this automatically? And the javascript files do use fonts and css don't they? – Folaht Jul 15 '17 at 05:54
  • Installing IS putting files in a folder and linking to it. bootstrap and font-awesome have multiple files. They have css and less and scss and fonts besides their javascript. – Folaht Jul 15 '17 at 06:02
  • @NisargShah Thanks for the edit. I realize that question should be for security. I just get scared to see every answer to be "use CDN", which I explicitly don't want. – Folaht Jul 15 '17 at 06:04
  • Nuget does that ASPX pages. NPM is also helpful, but I haven't used it much in my projects. I doubt there would be a tool that does it all. – Nisarg Shah Jul 15 '17 at 06:06
  • Go to the library's distribution page and hit Save as... on the libraries and pick your CSS/JS directory as the target? The problem is that every project has their own place that the JS or CSS should be stored. Every developer might follow a different philosophy, to make a tool that will put files exactly where you want them to be you need to make a custom npm command yourself. If you are working with a Laravel framework project then the project takes care of putting things where they should be for you. I'm guessing other frameworks do the same. – apokryfos Jul 15 '17 at 06:11

2 Answers2

1

JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)

To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).

Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.

As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).

Update: As for how to include files in your HTML, it goes like this (Bootstrap example) :

<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>

You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.

Rithwik
  • 1,128
  • 1
  • 9
  • 28
  • "it is literally their job to provide secure access to the files they host." The same thing can be said about the cloud. Trusting content to third parties is something I refuse to do. – Folaht Jul 15 '17 at 06:47
  • Yes, hehe. We all have trust issues. Is anything or anywhere on the web really secure or private is another question. But what about hosting your webpage or database on a private third party hosting service? You are trusting them. So it's all about how much you want to compromise. And for a page that doesnt face heavy traffic, using these files from your server rather than CDN would be fine, I think. So in the end its always your call. – Rithwik Jul 15 '17 at 07:00
  • 1
    "But what about hosting your webpage or database on a private third party hosting service?" I'm planning to host my webpage on MaidSafe, a decentralized network. – Folaht Jul 15 '17 at 07:36
  • +1. Thanks, I didnt know about MaidSafe. Looks like a very interesting idea. I guess then it would be best for you to not use CDNs, and just use MaidSafe DN. – Rithwik Jul 15 '17 at 07:48
  • 1
    A CDN also causes your .js files to be cached, so if a user already loaded jQuery from a CDN by visiting another website, he doesn't have to download it AGAIN for visiting your site. It's a huge advantage! – Kokodoko Jul 15 '17 at 08:19
0

I think it is not a good idea to use local files instead of CDNs until you are not working offline.

Here you can read about CDNs vs Local Files:

https://halfelf.org/2015/cdn-vs-local/

Multiple files on CDN vs. one file locally

https://www.sitepoint.com/7-reasons-to-use-a-cdn/

Although there is one another link that is just opposite:

7 Reasons NOT to use a Content Delivery Network

Nevertheless if you want to use the files locally you can follow the instructions below:

  1. Move at the cdn link in your project
  2. Copy the link from src or href and open it in your browser.
  3. Save the file locally and give the reference of the file in your project.
Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34