Bower install without Git - angularjs

I am generating a monolithic application with Jhipster with Oracle as the database with Yarn and generate-Jhipster. Below are the commands we executed and attached the package.json, bower.json, yo-rc.json and .bowercc files.
yarn add global bower
yarn add global gulp-cli
yarn add global generator-jhipster
jhipster (Throws exception while bower install as below)
Gulp (Throws the same above exception)
The bower_Components folder is not present as a result of the above without which the application is not working.

Bower requires git. https://bower.io/#install-bower
If you don’t want JHipster to initialize a git repository, use the -—skip-git flag when generating

Related

Why is it necessary to run 'npm install' when I already have all the dependence in node_module folder

Why is it necessary to run 'npm install' when I already have all the dependence in node_module folder.
After running 'npm install' successfully on my machine, I want to setup same project on another machine, why do I require run 'npm install' again when I already have downloaded all the dependence in node_module folder?
First of all I want to inform you 2 things:
As your project depend on some packages (node_modules), same as some packages are dependent on other packages.
when we install some package with command npm install package -g then -g will install it in global folder which can be accessed by any project. by using -g, package is not added to node_modules.
Now here is answer of your problem. There might be possible that some dependencies of packages are installed as global on one machine and not on other one. This can happen as developers work on many project on same machine and might be they have installed global packages. So in this case you need to execute npm install command.
npm install extract all your dependencies from your package.json, download it and save them in your node_modules folder. You don't need to run npm install again and again if you already have installed all your dependencies locally.
When ever you installs a new dependency you run npm install <package-name> --save and why --save for the first time? because it adds the new installed dependency on your package.json. We never push node_modules to our git repo only the updated package.json is pushed to repo. In that case if a new person pulls your code from the repo he is only going to run npm install and all the dependencies mentioned on your package.json will going to available on his project locally. Thats a small intro about why we use package.json hope it helps.
Check the version of node in both system .
I guess that would be issue. you local system would have either higher version than the server. May be not able to compile for higher version make sure the version are same for node in both , to reduce the comflict.

How Yarn manages package.json and bower.json files, when both are present in my project's root folder?

In my project's root folder,both bower.json and package.json are present.
When using npm previosly,i do both npm and bower install seperately.Now i switched to Yarn.My question is, what happens when i do a yarn install?
Will all the dependencies from package.json and bower.json will get
installed?
please help.
Yarn decided to drop Bower support for now. Yarn won't look at your bower.json. You will need to do bower install aside from yarn.
https://bower.io/blog/2016/using-bower-with-yarn/
A newer article https://bower.io/blog/2017/how-to-migrate-away-from-bower/ explains on how to move your dependencies from bower to Yarn
The tool bower-away mentioned in the article will convert your bower.json contents to a package.json format (may need to run a few times to resolve all the dependencies) and this can then be installed with Yarn/npm/...
From what I understand, Yarn still doesn't look at bower.json
If you're like me and have npm packages installed in a different directory to bower packages, you can try npm install --prefix or yarn install --modules-folder. For Yarn, the folder used will be a replacement of node_modules, but make sure to have a read of https://github.com/yarnpkg/yarn/issues/1684

Angular/node application setup/scaffolding

I have started to use angular with bower to manage some dependencies and gulp as a task runner. I asked a friend to clone and test my app today and he ran into some issues with setting up my app when it comes to installing dependencies.
I had him npm install and bower install but I was assuming that he had bower and gulp installed globally.
Do bower and gulp need to be installed locally and added to the package.json?
given the fact that if you install it via package.json, it puts the executable in ./node_modules/.bin/bower
so you cant type bower install.
What is the best way of handling this.
Thanks

Yeoman bower install vs npm install vs grunt

This is my first time developing an AngularJS app and using the scaffolding tool Yeoman (http://yeoman.io/). I wanted to use fontawesome for some of my icons (http://fortawesome.github.io/Font-Awesome/) and I know I should use the command
bower install fontawesome
However, I also saw this article (https://www.npmjs.org/package/grunt-font-awesome-vars) that talks about npm grunt install command below
npm install grunt-font-awesome-vars --save-dev
What is the difference there? I'm still a little fuzzy on how the variety of tools work and flow together. Could any Yeoman experts give me a low down when to use bower install, npm install, and the grunt commands so I would know the differences clearly and understand the flow? Thanks.
Grunt is a task automation tool that does very little straight out of the box. It does most of its work through plugging in grunt modules that perform specific tasks.
grunt-font-awesome-vars is a module for grunt (useless without grunt)
bower is a package manager.
npm is a package manager.
(I don't use Yeoman. It's a scaffolding tool for setting up your project structure. I don't agree with its opinions on where things should go, so I don't fool with it. I configure grunt and bower manually)
Quick and dirty:
install node with npm.
Then from your console, (Developer Command Prompt for VS2013, Bash, or whatever you use)
run the following commands
npm install grunt --save
npm install bower --save
npm grunt-font-awesome-vars --save
bower doesn't need grunt. grunt doesn't need bower. grunt doesn't need grunt-font-awesome-vars but grunt-font-awesome-vars needs grunt.
With the way my work flows, I use npm to manage package dependencies that I want to automate with grunt. I use bower to manage the versions of my client dependencies.
More information:
There's a "Yo, Dawg" to describes bower that comes to mind when someone asks the difference between it and npm.
"Yo, Dawg. We heard you really like packages so we installed a
package manager inside your package manager."
Basically, bower is just another package manager. It is installed with npm (which is a separate package manager)
I use npm for managing tooling and server dependencies (like grunt, grunt modules, sass, etc...things I potentially want to be automated) and bower for functional, client specific dependencies (like angular, jquery, etc...things that I potentially want to keep up to date with current version)
Installing through bower will utilize your bower.json. Installing through npm will utilize your package.json.
npm install grunt-font-awesome-vars --save-dev
will install grunt-font-awesome-vars as well as update your package.json with a devDependency(the --save-dev flag does that) so that it is automatically installed any time you perform an
npm install
if you change that command to
npm install grunt-font-awesome-vars -g
it will install grunt-font-awesome-vars to your node install location (indicated by your PATH system variable) and be available to all node instances.
Edit to answer question from comments
Asked: Also, why is there the need to have the install command as 'grunt-font-awesome-vars -g'
grunt-font-awesome-vars is the name of a module for grunt that is deployed as a node package. You install grunt modules with the "npm install" command. -g is a flag that instructs npm to install the requested package to global space, by making it available through your PATH variable. The only things that I currently have installed globally are http-server, bower, and karma. If you don't have packages installed globally, then you will have to have performed an "npm install" of that package at the current working directory in order to execute the commands of that package. For instance, http-server is a node module and is executed command line just like any other console application. In this case, the command "http-server" will start a local http server anywhere you want to serve a site from. If I install it to my PATH, I can run http-server from anywhere I want without having to do anything special. If you don't install it to your PATH, then the http-server executable must be in the directory in which you are wanting to run it. I install it globally so that I never have to "npm install" it again. Most things you will want to package with your project and that you can do with the --save flag rather than the -g (or --global ...they do the same thing) flag.

Setting up grunt, bower, angular dev tools after cloning from github

I am trying to clone a project from github then set up the bower dependencies and grunt build / dev tools. When angular projects are initialy pushed to github, certain directories and files have been shed (since they are listed on the gitignore file). I am trying to figure out how to resurrect all these files necessary to locally run a project (that I find from browsing on github).
After cloning the project, I run the bower command so that it reads through bower.json:
% bower install
Then I run the grunt commands:
% npm install -g grunt-cli
% npm install grunt --save-dev
Why is the Gruntfile.js not automatically created when I run these terminal commands?
It also hangs up on an issue related to livereload but that evaporates after I run these:
% npm install --save-dev connect-livereload
% npm install
When I start a project from scratch with these yeoman and grunt commands, it automatically creates the Gruntfile.js and I can successfully get the project to auto-load in the browser:
% npm install -g generator-angular
% yo angular
% bower install angular-ui
% npm install --save-dev connect-livereload
% npm install
% grunt test
% grunt server
% grunt
But I am trying to master the technique of cloning a project from github and then setting up the project locally. I am close but currently I am also experiencing an issue with a missing Gruntfile.js. I would be very grateful for any direction you could provide. All the best,
Ben
Using Yeoman
You don't need to clone the project from GitHub.
You simply need to make a new (clean) project directory.
cd /new/project/directory
(Optional) Update NPM
npm update -g npm
Install angular scaffold
npm install -g generator-angular
Run yeoman scaffold
yo angular
Fire up a server
grunt server
Start building your app, perhaps with Angular sub-generators
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
Using bower to install front-end dependencies
Search for repos to install
bower search dep-name
or, http://sindresorhus.com/bower-components/
See what all has been installed
bower list
or, see your bower.json file
Installing dependencies
bower install dep-name
or, add it to bower.json file then simply run bower install(Preferred)
Most of all, Read Documentation
Yeoman Getting Started
Bower
Grunt
I would recommend reading through Yeoman first. Get the hang of it, then move on to the other docs once you need more advanced customization for your project. Generally, the Yeoman docs cover bower and grunt well as it relates to your Yeoman project.
I get it working after do the following:
brew install nvm
source $(brew --prefix nvm)/nvm.sh
It will install nvm then you can controll your npm version (may you have problem with this with yo:angular project)
Then you should make sure that you are using npm 0.10
nvm install 0.10
nvm use 0.10
To avoid problems with previous npm installations cached you should use:
sudo npm -g cache clean
Now you are ready to get your yo:angular project working in your machine:
git clone <yourproject>
cd <your-project-directory>
npm install
It will install grunt and karma for you, then you should install all bower packages before start your dev server:
bower install
Then, finally, your project are done to be working so you can use:
grunt serve
:)

Resources