Should dependencies be installed with bower or broccoli in ember app? - node.js

I'm new to js package managers and build tools so this seems a bit confusing to me.
I've set up a new ember app and I want to add the dependencies (foundation) in the recommended/conventional way. There seem to be two ways of adding this to your project, using bower or broccoli.
This page recommends using broccoli:
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
#import 'bower_components/foundation/scss/normalize';
#import 'bower_components/foundation/scss/foundation';
whereas this recommends using bower.
$> bower install --save bootstrap
Afterwards add following two lines to your ember-cli-builds.js (or Brocfile.js if you are using an older version of Ember.js):
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
Could someone shed some light on what the difference between these is and which one is the better/recommended way?

Official ember-cli documentation recommends to use bower: "Ember CLI uses Bower for dependency management"

Related

React - How to check which npm packages are not used on a project

I use CRA approach (create-react-app) using npm install installed different packages for my project, I don't use many of them but manually check which of these packages is not used on the project and then remove it will be a very difficult process, is there a way quickly check which packages are not used on my project and remove them?
You can check for any unused dependency or devdependency with depcheck package in any nodejs project. Use npx to use this package without installing it, run following command in terminal:
npx depcheck

relationship between webpack, npm, bower, gulp

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.

How to do environment setup for jhipster for java development

I am new to JHipster.I have gone through all the steps for JHipster SetUp in Windows.
First Issue :
Unable to create Jhipster Project
I have followed the below steps.
1.Install Java from the Oracle website.
2.Install Maven (recommended). If you prefer to use Gradle instead, don't install it, as JHipster ships with the Gradle Wrapper.
3.Install Git from git-scm.com. We recommend you also use a tool like SourceTree if you are starting with Git.
4.Install Node.js from the Node.js website. This will also install npm, which is the node package manager we are using in the next commands.
5.Install Yeoman: npm install -g yo
6.Install Bower: npm install -g bower
7.Depending on your preferences, install either Grunt (recommended) with npm install -g grunt-cli or Gulp.js with npm install -g gulp.
8.Install JHipster: npm install -g generator-jhipster.
But i am getting errors while creating JHipster project using command prompt.
Second Issue :
How we can import the existing project from JHipster git to eclipse
I downnloaded a sample JHipster project fro git and while trying to import the same project in to workspace i am facing an error like:
jdt apt pluging is not getting in eclipse to build that project....
Rather than Juno, I would suggest using Spring Tool Suite - http://spring.io/tools/sts
It's an Eclipse distribution that bundles a comprehensive set of plugins enabling one to work with Spring projects.
I found Eclipse to be weak when working with Javascript and HTML. I switched to Intellij almost a year ago and am very happy with the decision.

bower packages with submodules polymer

We are developing a toolset of components which are available through bower. When we looked at the Polymer components we noticed that they make use of 'bower install Polymer/Module'
My question is how do they manage to work with these "submodules" in Bower?
The user/package format is not specific to Polymer, it is a feature of the bower install command. It is a shorthand for a Git repository, and Bower defaults to GitHub.
bower install polymer/core-icon
is the same as
bower install https://github.com/polymer/core-icon.git

npm install bower using -g vs --save-dev

I'm new to node and using npm to both do some node, angular and Express tutorials. I have used bower before in a tutorial. I'm pretty sure I have installed it using -g already as when i run the bower -v command I get back 1.3.3 I am to understand that installing it using -g means, Install this globally so that on the next project I don't have to install it again.
1) Is this correct?
2) When I start working with a new project do I have to initialize bower?
3) Is there any reason I should use install bower --save-dev after I have already installed bower (-g)lobally?
4) What exactly does install bower --save-dev do?
I have searched and get nothing on google or stack over flow when I search "--save-dev".
I really want to understand this and if you help me, it will help me understand installing much more than just bower and how to use those installs. Again, I'm new to the command line for this type of development and new to these technologies, but have some basic understanding.
Using the --save and --save-dev flags when installing will add them to the project's package.json. This allows anyone who might develop on or use the project to install the dependencies as needed with a simple npm install command. By contrast, the -g flag is global only to your local machine.

Resources