No /bower_components/ in Yeoman Webapp - node.js

I'm new to command line and yeoman, but it's something I have been too to explore and decided to follow the introduction into getting started with a Yeoman webapp.
I made sure my Ruby, Compass, Git and NodeJS were all installed before installing Yeoman.
I successfully installed Yeoman and the Generator-webapp.
Then I ran yo webapp in a directory and pulled down a webapp with Bootstrap, Sass and Modernizr.
However it doesn't appear to have created a bower_components for my dependancies, because when I run ls this is what I see
Andrew-Clarks-MacBook:project1 clk$ ls
Gruntfile.js app bower.json node_modules package.json
Then when I run grunt serve i get the following errors
Andrew-Clarks-MacBook:project1 clk$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Done, without errors.
Execution Time (2014-04-18 04:28:49 UTC)
loading tasks 4ms ▇▇▇▇▇▇▇▇▇▇▇ 22%
copy:styles 13ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 72%
Total 18ms
Warning: Syntax error: File to import not found or unreadable: ../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss.
Load paths:
/Users/clk/Sites/project1
/Users/clk/Sites/project1/app/styles
/Users/clk/Sites/project1/bower_components
on line 4 of app/styles/main.scss
Use --trace for backtrace. Use --force to continue.
Aborted due to warnings.
Execution Time (2014-04-18 04:28:46 UTC)
concurrent:server 4.2s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 4.2s
When I run bower install to try and get them I get the following message
Andrew-Clarks-MacBook:project1 clk$ bower install
bower jquery#~1.11.0 not-cached git://github.com/jquery/jquery.git#~1.11.0
bower jquery#~1.11.0 resolve git://github.com/jquery/jquery.git#~1.11.0
bower modernizr#~2.6.2 not-cached git://github.com/Modernizr/Modernizr.git#~2.6.2
bower modernizr#~2.6.2 resolve git://github.com/Modernizr/Modernizr.git#~2.6.2
bower bootstrap-sass-official#~3.1.0 not-cached git://github.com/twbs/bootstrap-sass.git#~3.1.0
bower bootstrap-sass-official#~3.1.0 resolve git://github.com/twbs/bootstrap-sass.git#~3.1.0
bower jquery#~1.11.0 ENORESTARGET No tag found that was able to satisfy ~1.11.0
Additional error details:
No versions found in git://github.com/jquery/jquery.git
If someone can help this command line / yeoman rookie (and i mean rookie) that would be fantastic.
Apologies if this query has come up before, I searched for a fair while before posting!

Go into your main.scss file, and on line 4, change the ../../ part to just ../
The the bower_components file is found under app/bower_components.
../ takes you up one level from the directory that main.scss is in, which is in this case is app/styles.
../../ takes you up two levels, when you only need to go up one.
Not sure why when you run yo webapp it does that, I had the same problem. It must be to do with a the new update.

I had a problem with the missing bower components folder and I changed from using the npm command line to GIT bash and then everything seems to work fine.

I had the same problem, everything was installed except the bower_components folder in the app folder.
Untill I used GitBash instead of cmd, and it worked like a charm!

Folks, i faced the same issue [ and am not familiar with GitBash] , but i managed to resolve it after i followed bower install procedure to manage third party dependencies. More help here https://github.com/yeoman/generator-webapp

There was an issue with webapp that looks to have been resolved in newer versions.
webapp - relative references.
Also, you can check to see if you have bower installed:
bower -v
If it is not installed then install it:
npm install -g bower

Related

A valid Gruntfile could not be found

I have followed this link to try to install a mean.js stack on an ubuntu server.
Regarding grunt, in /opt/mean, I have done
sudo npm install -g bower grunt-cli
sudo npm install grunt --save-dev
sudo npm install
However, grunt or grunt jshint inside the folder gives
A valid Gruntfile could not be found. Please see the getting started
guide for more information on how to configure grunt:
http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.
Note that npm start works, and http://server_domain_or_IP:3000 can display the sample application.
Does anyone know how to fix the grunt error?
As the error states, you do not have a Gruntfile and https://gruntjs.com/getting-started shows you an example of one.
Simply installing Grunt is not enough. When you run grunt it needs a configuration file (your Gruntfile) to run any tasks. The Gruntfile itself contains the tasks to be run.
You will need a Gruntfile.js in your project. you can create the same using the following grunt command.
grunt-init gruntfile
The above command will create the sample gruntfile.js file in your project.

grunt install error: unable to find local grunt

I'm trying to run grunt but receiving this error. I have grunt installed globally and can run 'grunt watch' from other locations and it works for other files. I have a new project given to me which has less files, and it contains a package.json file (this seems buried, where I'd assume it should be closer to the root but I'm new to this). I try to run grunt watch from the root and receive the error message above. The package.json does not list grunt files as dependencies. Any help is appreciated. Thanks
The error is telling you that it's missing locally. npm scripts run things out of the node_modules directory, so install grunt locally to resolve it.
npm install grunt --save-dev

Bower, Grunt on Ubuntu 12.04 - command not found

I've installed bower and grunt on my machine but non of it works. I get :command not found for both.
I've placed paths to bower and grunt in .bash_profile file, like:
export PATH="/home/user/.node/lib/node_modules/grunt-cli/bin:$PATH"
export PATH="/home/user/.node/lib/node_modules/bower/bin:$PATH"
It feels like packages are installed correctly but it can't be found.
Npm and node is located in home/user/.node and home/user/.npm directories is this is the right place for it?
which bower/grunt outputs nothing
Just had to remind myself of this one, to set up environment on a new machine.
As per http://gruntjs.com/getting-started, there are two steps required for installation and use of Grunt.js task runner on a given project:
You should globally install only 'grunt-cli', the Grunt Command Line Interface. This will put the grunt command on your system path. This is achieved by running npm install -g grunt-cli, which may require root privileges depending on your setup.
You should locally install the grunt task runner proper. This is achieved by running npm install, after adding the desired version of Grunt.js to your project's package.json file. This will install the specific version of Grunt.js described in your project's package.json, under the devDependencies section. This is the file used by nodejs to describe project development and deployment dependencies, among other stuff.
I managed to fix it by adding paths to .bashrc file, like:
PATH=$PATH:/home/user/.node/lib/node_modules/grunt-cli/bin
PATH=$PATH:/home/user/.node/lib/node_modules/bower
Reference

Can't run yeoman application with grunt, cdnify.js

I've project to join so I cloned repo from git. I have installed npm install and then bower install, but when I try to run the app with grunt serve command, console returns this:
Loading "cdnify.js" tasks...ERROR
>> Error: Cannot find module 'chalk'
Running "serve" task
Running "clean:server" (clean) task
Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/home/tomek/dev/mobilas/app/bower.json' Use --force to continue.
Aborted due to warnings.
The thing is, I shouldn't really change neither Gruntfile.js nor bower.json file.
Link I referenced in comment above fixed it for me... just had to run
npm install chalk
in the project directory as a work around until they get one of the grunt dependencies fixed.
Running below commands should fix your errors...
$cd /home/tomek/dev/mobilas
$rm -rf node_modules
$npm install
Now you should be able to run your app with $grunt serve command

Continuous integration and deployment of Node.js application on Bamboo

The application I want to implement continuous deployment on Bamboo has node modules and bower component dependencies. On the bamboo server nodejs, npm have been installed.
There are only three tasks on default job:
Source Code Checkout
Build dependencies:
npm install
bower install
Deploy to the staging server
The problem is on the second task, bamboo fails with the message "No failed tests found, a possible compilation error occurred." I don't even run any tests.
The log file is not explanatory at all:
Starting task 'Build dependencies' of type 'com.atlassian.bamboo.plugins.scripttask:task.builder.script'
Failing task since return code of [/bin/sh /home/ubuntu/bamboo-installation/temp/WEB-WEB-JOB1-8-ScriptBuildTask-4430338079602360707.sh] was 1 while expected 0
Ok, I solved the problem. The issue was the wrong node (which obviously messed things up) was installed on the bamboo server. Uninstalled the wrong one and everything worked as expected.
Good to see you solved it.
There is a setup I use and which could prevent further problems with CI:
export npm_config_prefix=.npm/
export PATH=.npm/bin:$PATH
export CI=true
npm install -g bower
bower install
npm install
This installs bower (and others like grunt-cli if you want) in your project folder so you can e.g. have a specific version, sets CI=true as advised in bower docs, and then installs all dependencies.
Bamboo AMI originally have npm version 1.4.28 installed and you are probably using a more recent version on you development environment. I had the same issue and resolved it by creating a script task to update npm version on the very beginning of my build process. Here is the script:
# update npm
curl -O -L https://npmjs.org/install.sh
chmod +x install.sh
sudo PATH=$PATH:/opt/node-0.10/bin ./install.sh

Resources