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

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
:)

Related

regarding installing angular plugin by NPM or bower

sorry to ask a very basic question because i am not familiar with NPM and bower. just saw a hint to install a library based on angularjs.
just see it
npm install --save angularjs-gauge
bower install --save angularjs-gauge
i just like to know where NPM or bower will save the library ?
how can i specify path to save the lib in specific folder with NPM and bower. thanks
Create a Bower configuration file .bowerrc in the project root and specify the directory path.
e.g:-
{
"directory" : "public/components"
}
https://bower.io/docs/config/
Run bower install again.

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

Why doesn't the yeoman angularfire generator work from the start?

After doing the generator-angularfire installation and running grunt and grunt serve, I'm getting errors that angular is not defined in all of the JS files: https://www.dropbox.com/s/8u6d3bfn854iso2/Screenshot%202014-10-31%2012.40.18.png?dl=0
I'm going to assume that the generator works because it's maintained by firebase (https://github.com/firebase/generator-angularfire).
That said, I followed these exact instructions from the README and it isn't working:
Install generator-angularfire:
npm install -g generator-angularfire
Make a new directory, and cd into it:
mkdir my-new-project && cd $_
Run yo angularfire, optionally passing an app name:
yo angularfire [app-name]
Run grunt for building and grunt serve for preview
i believe there is a bug in the most recent generator-angularfire where it doesn't list bower or grunt-cli as a dependency. so do the following and try again before yo:
npm install -g bower grunt-cli

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.

Cannot use grunt on simple Yeoman angular

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

Resources