I make this question because of a problem I'm having making "bootstrap-select" to work with Bootstrap 4, but its a rather general conceptual question. Let's go:
What's the difference between installing a package and just referencing its css/js in html? Let's take bootstrap-select as an example:
I can put the references I paste below inside index.html and bootstrap-select will work (or at least it should) but I can also install package with "npm install bootstrap-select" so what's really the difference between both approaches? It is one of them just enough for make the package to work? Are both steps required? What's a best practice?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js" />
Another example, documentation says bootstrap-select requires Popper so it's enough to add this next script reference to index.html or instead I should install popper through npm install popper? Or I should do both?
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" />
According to me, the best practice is to install and get into node_module. my reason for that would be
You need to be connected to the internet while loading the application (Package won't load when you're running in intraNet.
You might never know when would the package CND is updated and you might face some issues after updates.
Feel free to correct me :)
It's recommended by angular that you use angular.cli.json(angular version 4) and angualr.json in (angular 5) Rather than declaring the js files in index.html, this keeps your code clean. And installing through npm is easy and reduces the effort for the js version updates as well.
Related
I understand that there are basically two ways of deploying a vue app. One is to include the library directly with:
<script src="https://unpkg.com/vue"></script>
and the other method is to use vue cli, then build with npm
I saw many tutorials, but I could not get a quite understanding of what exactly is different, or what are the advantages of each side?
Vue can be used through -
CLI - es NPM / yarn to install Vue. Sets up default config pretty nicely
NPM - (or yarn) install Vue directly and configure yourself [recommended for large projects]
CDN - refer directly through in your HTML /script
If you want to just include Vue in your script that has a larger objective, or accomplish something 'comparatively' simple, just use CDN. This is a good way to use the power of Vue without worrying about the intermediate build steps specific to Vue. Your completed product will continue to refer to Vue from CDN.
Also, each CDN lookup will mean an additional server request - this is likely to serve content faster than your own server, but an additional lookup nevertheless. Having tens of CDNs is not ideal.
For larger projects, NPM is ideal. You would want the power of Single File Components with (files with a .vue extension) that play well with editors, and provide a more structured way to develop the application (incl. things like scoped CSS).
Also, the build step through local Vue is a must if you use functions not supported by browsers today, or want to support older browsers.
https://v2.vuejs.org/v2/guide/installation.html
I am working on a project with dotnet core, in Linux and it is using MVC.
I am reading a book for learning how to put things together. The book advises installing Bower. But the last time I researched bower I believe they were advising towards using something else for new projects.
I would like to know what alternative I can use for front end management. I need to be able to use Bootstrap, Jquery, Popper and Datatables on my page. And of course, I should be able to use it in Linux.
Thanks for the help francium. NPM is working just fine.It is in the official Ubuntu repository. You have to install popper the following way though: npm install popper.js --save
If you don't specify the .js extension it will give you a warning saying that bootstrap requires a popper installation but it was not installed. You also have to install git on your machine to make it work. I did not do it the first time I ran it and it gave me an error asking me if it was installed. Thanks for the suggestion, It was relatively easy to do get things working.
Yarn is now the alternative to Bower, but to install Yarn you need to use NPM
Recently, node package manager is very popular and doing a lot of job for us, however it is really difficult to understand what is going on under the hood. I really like simple tags to insert Vue, Babel etc. Haven't worked on big projects, I really wonder is there any disadvantages using script tags over npm-cli.
When you npm install a library, plugin, extension, etc it can be declared as a dependency with a --save flag. In doing so it is marked as a dependency in your package.json file, which is key to version control for your dependencies. If you just use the CDN you are pulling in a path to a library that may be deprecated at some point in the future.
During development it is ok to use CDNs, but in production it is not good practice for dependencies (though I do it for certain exceptions, such as a google font).
I've implemented the Ace Editor using the recommended CDN I've seen in their official documentation and it works great.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript" charset="utf-8"></script>
However, being an external resource, it requires internet, which the user may not always benefit of, as in my case, the application could run on the internal server of an embedded device.
Simply copying the code from the cdn link into a JavaScript plugin starts the editor without any features.
Is there any way to manage this library using bower or npm ?
You need to include mode, theme, and worker files in addition to ace.js, copy the whole https://github.com/ajaxorg/ace-builds/tree/master/src, or use npm install ace-builds
I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.