I don't really know where the bower_components directory came from in my Node Express app but it seems to be competing for attention with my node_modules folder since both contain jquery and bootstrap.
I am using Browserify and am trying to bundle up jquery, bootstrap and some other components. What exactly is going on here with Bower? Do I need Bower for anything?
For instance, when I do a require('jquery') in my application code how do I know if it's coming from the NPM node_modules or Bower bower_components?
Basic browserify can only use node_modules.
To use with bower, it can use transform before import node_modules.
If you use debowerify transform, it will import bower_components before node_modules. So if your bower.json has jquery and bootstrap, it will use bower_components'.
If you use browserify-shim transform, it will search your package.json's browser field. So if your browser field has jquery and bootstrap, it will use it.
Related
currently i'm using gulp + bower with wiredep to inject my dependencies into my HTML file. It all works pretty well but i'm having some problems with newer versions that don't support bower anymore.
Having that said, I would love to just drop bower completely and use the node_modules files instead. Is there anything that works like wiredrep but instead uses package.json to get my dependencies?
thank you all
I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.
Webpack is replacing bower and gulp
Bower was use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )
In some big project people still use gulp because give more control of the project
npm is the package manager for JavaScript.
If I want to I can install bootstrap from either npm or bower or gulp.
People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.
Webpack replacing bower and gulp is because those are overkilling people's time.
The last thing is a question, I saw on youtube people download sass sass(which I understand is a front end thing tool)eg:(npm install gulp gulp-sass --save-dev) in gulp and then not using bower, is that even the the right way to do things? because if yes why do we still need to use use bower?
Webpack can be an alternative for gulp. Webpack doesn't do anything Bower does.
Bower was often used to manage frontend dependencies (eg, bootstrap), while npm was often used to manage backend dependencies (eg, express).
People use gulp because it's worked out for them so far, and the time/effort it takes to learn something else and switch to something else might not be worth it.
npm is a package manager for dependencies, but it isn't exclusive to JavaScript dependencies.
You can install bootstrap with Bower or npm.
Starting with version 3, npm installs everything in a flat hierarchy. You can use npm to manage dependencies that are used on the frontend AND backend, so some people don't see the point in having Bower.
Webpack can be an alternative to Gulp, but a lot of people had a hard time learning how to use Webpack.
Yes, you would npm install gulp-sass --save-dev, which installs gulp-sass with npm. I imagine gulp-sass is a tool that lets you use SASS and Gulp together. You wouldn't use Bower in any of this.
I just got started with Node.js and found that we need to RequireJS library on the backend. Also, we need to include it in view if we want to use it there. So, if I want to use d3 to manipulate some data I will specify require in backend and send the result only to front end? Or should I include it in both server side and HTML page? So is it redundant that using same library on both sides?
For jQuery: I did
npm install jquery
For Bootstrap:
npm install bootstrap
Now as the version does not match, I am including different jQuery in HTML file. Again I added d3 from scripts. Although it works, is this the proper way to design a Node.js app?
You do not want to use npm for the client side part of the application (bootstrap included). I would recommend installing bower.
npm install bower
bower init
Create a .bowerrc file and put in it { "directory" : "public/components"}
bower install bootstrap --save
Include the script in the html file.
I have been installing React into Meteor projects using
npm install --save react react-dom
What is the difference between doing that and using a package from Atmosphere:
meteor add reactjs:react
It's more like a consistency assumption rather a real deal.
You may install react via bower , NPM , Atmosphere or even by cloning the repository.
In my projects, I had clarified dependency management as:
Use NPM for backend dependencies ( using Node.js ) or frontend dependencies that require a building / piping / bundling system like Babel, Webpack or Gulp.
Use Bower for "presentation" dependencies like Bootstrap, jQuery or prebuilt modules used as is.
Use any additional package management tool for any further dependency injection.
TL;DR
There are no differences between the two approaches ( although Atmosphere is not mentioned as a proper way to install / build React into the official docs)
If you prefer to keep React rendered in the browser use NPM or Bower. If you need to use React mapped into Meteor backend's code as an isomorphic app you may use Atmosphere as it is semantically used as a dependency.
I install bootstrap with
npm install bootstrap --save
in my express project, then bootstrap is installed in node_modules, but how can I access the js and css in my jade file?
Node_modules is meant to use for server modules. NPM is server package management system.
You should use client package management system like bower for your client side modules i.e. Bootstrap.
Once you set up bower, you'll be able to reference bower_components in your html files.
It depends on how you configure your static server, e.g.:
app.use(express.static('public'));
So if node_modules is placed into public folder, your jade file will be:
script(src='/node_modules/bootstrap/js/file.js')
But better approach is use bower_component instead of node_modules on the client-side