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.
Related
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
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.
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
Trying to just startup a simple angular app via Yeoman, using steps in this guide
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
and get this error when trying to run grunt or grunt server:
Loading "Gruntfile.js" tasks...ERROR
Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Here are my versions:
yo --version && grunt --version && bower --version
1.1.2<
grunt-cli v0.1.13
grunt v0.4.4
1.3.1
See screencast of this in action:
http://screencast.com/t/4ToPw3SlL2
I just encountered the same problem today, managed to resolve it with the answers here.
Basically I needed to update npm to latest version,
by using this command (the npm which came with Node-v0.10.29 package was outdated)
npm update npm -g
or
sudo npm update npm -g (i used this command on my mac)
Then type this command
npm --version (it should show 1.5.0-alpha-4 or later version)
Then type the grunt serve command
grunt serve
If you still have issues, then try running these commands
npm install
or
sudo npm install (i used this command on my mac)
Then try grunt serve command again,
grunt serve
This time, it worked for me.
If it didn't, then try this command
bower install (i did not have to use this command)
Run the following commands from the directory that has the Gruntfile.js for your project:
npm install
npm install -g bower
bower install
This will install all npm and bower based dependencies for your project.
In the screencast at 1:18 it shows install errors tied to at least multimatch. load-grunt-taskis dependent on multimatch.
Installed "load-grunt-tasks" module locally
ie
npm install load-grunt-tasks
instead of
npm install -g load-grunt-tasks
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
:)