I am trying to use yeoman, grunt and bower for my AngularJS development on Windows 7. I am using GitBash to run the commands. I did the following steps
Installed node.js (npm --version 1.4.14)
npm install -g yeoman grunt-cli bower
npm install -g generator-angular
cd c:/wamp/www
mkdir test-ang
cd test-ang
yo angular
When the scaffolding process is complete, I always find that my bower_components folder is outside app. Due to this my index.html is displayed without any styles and javascript as they link to "bower_components/bootstrap/dist/css/bootstrap.css". same thing happends for js files too. If I change it to ../bower_components/bootstrap/dist/css/bootstrap.css" in index.html, then things look fine. But doing grunt serve changes the index.html again
I tried to manually move bower_components inside app folder and edit .bowerrc file accordingly, but it did not help either. Also another interesting thing is, if I do the above listed steps in Virtual box ( running CentOs ) at my work machine, then the bower_components folder is automatically inside app folder.
Has anyone faced this before? Any thoughts or help would be appreciated.
Related
I created a simple data listing app using angular js.
I used Bower and also grunt. Grunt to serve the project with a specific port. But have a error.. When i'm serve the project with Grunt, the bower_components are not working. I mean all the jquery and also angular parts get 404. I here by attach a link to my project.
Get my project here - https://github.com/chanakaDe/DemoApp
First clone it, then "npm install" and then "bower install".
Please tell me how to make them work.
Always get 404 errors like this
GET http://localhost:1701/bower_components/jquery/dist/jquery.js 404
You're specifying ./src as the root of your server in the Gruntfile. Unfortunately, bower installs it's dependencies a folder above it, in the root of your project. Your HTML has a couple of script tags with ../bower_components/[path to files], but this will not work.
You need to try to install the bower dependencies in your src folder. Add a .bowerrc file in the root of your project with the following content:
{
"directory" : "src/bower_components"
}
Then reinstall bower dependencies by doing:
$ bower install
Check if a folder bower_components have been created in your src folder.
Next replace ../bower_components with bower_components in the index.html file.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.
I am starting out angular app with angular-fullstack in my Windows 7 box. I installed bunch of npm packages with -g options, including grunt-bower-install. I created the application first by running
yo angular-fullstack appname
There were no exception during the application creation. After application was created successfully I tried to run the app using
grunt serve
expecting the server to run. But the 'grunt serve' failed with
Running "bower-install:app" (bower-install) task
Cannot find where you keep your Bower packages.
We tried looking for a .bowerrc file, but couldn't find a custom
directory property defined. We then tried bower_components, but
it looks like that doesn't exist either. As a last resort, we tried
the pre-1.0 components directory, but that also couldn't be found.
Unfortunately, we can't proceed without knowing where the Bower
packages you have installed are.
Fatal error: No Bower components found.
I did find .bowerrc file and it was pointing to app/bower_components. Unfortunately, bower_components file was no where to be found. I am not sure what should be the content of the file to create it myself. Is it the missing file causing this problem or is there a npm package, I did not install correctly?
I installed bower using npm as well *
Thanks
Confusingly, the grunt-bower-install task that comes with angular-fullstack doesn't install bower components. It doesn't install anything. This error is trying to let you know that it can't find the bower_components directly, so it can't do its thing.
To fix the issue, run bower install.
If you don't have Bower installed, run npm install -g bower first.
I had the same issue, here's what worked in my case:
installed ruby and compass (yeoman needs these)
verified that path to Ruby bin folder is added to %PATH%
installed Git
restarted cmd window and ran "bower install" in the app folder
After that, grunt serve command worked perfectly.
Note: maybe installing Git and running bower install would suffice in your case.
I faced the same problem but only did npm install -g bower and then bower install and got grunt serve working.
I did not need to do any of the things mentioned by Olga.
Hope this helps.
npm install -g bower doesn't install bower components, you should run as well bower install to have all bower's components installed and then run grunt serve. It should work fine
Try to do bower install. If its failing saying not able to connect to git then you can change repo pointing location by simply running below command
$ git config --global url.https://github.com/.insteadOf git://github.com/
This will ensure that you will be downloaded over https instead of git if its causing orginasation firewall to block it.
In my case, I added sudo for it to work. So, I ran sudo npm install -g bowerand then bower install. grunt serve then worked when I ran it.
The Bower installation requires the packages to be brought from the Git repository, so first you need to install the Git application in your system. You can download it from this link :https://git-scm.com/downloads . Now after your have downloaded it , there may be a chance that the PATH may not be set up, so go to ControlPanel -> System and Security -> System -> Advance System Settings (on the left-hand side), click it, then goto Environment Variables -> System Variables -> PATH , click edit , and write down the following paths :
;C:\Users\admin\AppData\Local\Programs\Git\bin;
C:\Users\admin\AppData\Local\Programs\Git\cmd ....Well the above path is where Git was installed in my system, you can crawl to the place in your system where Git was installed and select the paths from the "bin" and "cmd" folder and paste it on the PATH variable.
Now, after the GIT path is setup, you can now type in the command " $ bower install " , this will install all of your bower packages.
npm install -g bower
bower install
grunt serve
worked for me ...
npm install -g bower
bower install
grunt serve
It's worked too
I have installed AngularJS using bower, by calling:
$ bower install angular-latest
Now I wonder how to integrate AngularJS into my html file. Apparently, there is neither an angular[.min].js file nor an index.js file as suggested by the bower documentation.
I can't imagine that I am the first person on earth to discover this problem, but unfortunately I did not find any clues on this on Google (but perhaps I only used the wrong terms for searching).
Any idea of how to include AngularJS?
Okay, I found the solution:
$ bower install angular
And everything is fine ...
What you installed with
$ bower install angular-latest
was only the latest source code. You need to actually build AngularJS.
First, you need to install all of the following dependencies if you haven't already:
Git
Node.js
Java
Grunt
Bower
Second, change into the angular.js directory.
Then, install node.js dependencies and bower components:
$ npm install
$ bower install
Finally, you're ready to build your package:
$ grunt package
In the resulting build directory, you'll find
angular.js — The non-minified angular script
angular.min.js — The minified angular script