Bower Components folder is missing from Yeoman generated web site

StackOverflow https://stackoverflow.com/questions/19498621

Question

These are all the commands I've run, just in case:

Node version:

> node -v

v0.10.21.

Installing yo:

> npm install -g yo

This yielded no errors or warnings.

Installing generator-webapp:

> npm install -g generator-webapp
npm WARN engine hawk@0.10.2: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.21","npm":"1.3.9"})
npm WARN engine hoek@0.7.6: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.21","npm":"1.3.9"})
npm WARN engine sntp@0.1.4: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.21","npm":"1.3.9"})
npm WARN engine boom@0.3.8: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.21","npm":"1.3.9"})
npm WARN engine cryptiles@0.1.3: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.21","npm":"1.3.9"})

Creating the directory... how useful

> md wat
> cd wat

Scaffolding webapp

wat> yo webapp

These are the options I've used:

Out of the box I include HTML5 Boilerplate and jQuery.
[?] What more would you like?
 [ ] Bootstrap for Sass
>[X] RequireJS
 [ ] Modernizr

Now this did yield a lot of unhappy messages:

- npm WARN package.json wat@0.0.0 No description
npm WARN package.json wat@0.0.0 No repository field.
npm WARN package.json wat@0.0.0 No README data
...
npm http GET https://registry.npmjs.org/grunt-svgmin
npm http GET https://registry.npmjs.org/grunt-concurrent
npmbower ENOGIT         git is not installed or not in the PATH
http 304 https://registry.npmjs.org/grunt-contrib-requirejs
npm http 304 https://registry.npmjs.org/grunt
npm http 408 https://registry.npmjs.org/grunt-contrib-imagemin
npm ERR! registry error parsing json
npm http 408 https://registry.npmjs.org/grunt-contrib-watch
npm ERR! registry error parsing json
npm http 304 https://registry.npmjs.org/grunt-bower-requirejs
npm http 304 https://registry.npmjs.org/grunt-contrib-jshint
...
npm http 408 https://registry.npmjs.org/grunt-usemin
npm ERR! registry error parsing json
npm http 408 https://registry.npmjs.org/grunt-contrib-connect
npm ERR! registry error parsing json
...
npm http 304 https://registry.npmjs.org/asn1/0.1.11
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm http 304 https://registry.npmjs.org/assert-plus/0.1.2
...
npm WARN prefer global bower@1.2.7 should be installed with -g

Running server:

> grunt server

Running "copy:styles" (copy) task
Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue. Use --force to continue.

> grunt server --force

    Warning:
    N:\wat\node_modules\grunt-contrib-compass\node_modules\tmp\lib\tmp.js:261
      throw err;
            ^
    TypeError: Cannot read property 'stdout' of undefined
        at compile (N:\wat\node_modules\grunt-contrib-compass\tasks\compass.js:39:10)
        at N:\wat\node_modules\grunt-contrib-compass\tasks\compass.js:70:7
        at N:\wat\node_modules\grunt-contrib-compass\tasks\lib\compass.js:121:11

        at _fileCreated (N:\wat\node_modules\grunt-contrib-compass\node_modules\
tmp\lib\tmp.js:172:7)
        at OpenReq.Req.done (N:\wat\node_modules\grunt-contrib-imagemin\node_mod
ules\gifsicle\node_modules\bin-wrapper\node_modules\download\node_modules\decomp
ress\node_modules\tar\node_modules\fstream\node_modules\graceful-fs\graceful-fs.
js:142:5)
        at OpenReq.done (N:\wat\node_modules\grunt-contrib-imagemin\node_modules
\gifsicle\node_modules\bin-wrapper\node_modules\download\node_modules\decompress
\node_modules\tar\node_modules\fstream\node_modules\graceful-fs\graceful-fs.js:6
4:22)
        at OpenReq.Req.done (N:\wat\node_modules\grunt-contrib-imagemin\node_mod
ules\gifsicle\node_modules\bin-wrapper\node_modules\download\node_modules\decomp
ress\node_modules\rimraf\node_modules\graceful-fs\graceful-fs.js:142:5)
        at OpenReq.done (N:\wat\node_modules\grunt-contrib-imagemin\node_modules
\gifsicle\node_modules\bin-wrapper\node_modules\download\node_modules\decompress
\node_modules\rimraf\node_modules\graceful-fs\graceful-fs.js:64:22)
        at OpenReq.Req.done (N:\wat\node_modules\grunt-contrib-imagemin\node_mod
ules\pngquant-bin\node_modules\bin-wrapper\node_modules\download\node_modules\de
compress\node_modules\tar\node_modules\fstream\node_modules\graceful-fs\graceful
-fs.js:142:5)
        at OpenReq.done (N:\wat\node_modules\grunt-contrib-imagemin\node_modules
\pngquant-bin\node_modules\bin-wrapper\node_modules\download\node_modules\decomp
ress\node_modules\tar\node_modules\fstream\node_modules\graceful-fs\graceful-fs.
js:64:22) Used --force, continuing.

Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for
 this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass
Used --force, continuing.

Running "copy:styles" (copy) task

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.

Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:9000.

Running "watch" task
Waiting...

Now the issue:

When the browser opens I have these two 404...

Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:9000/bower_components/jquery/jquery.js
Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:9000/bower_components/requirejs/require.js

I could manually create the folder and place the files in, but what would be the point of using this scaffolding tool.

What am I missing? I'm new to Yeoman, but the yeoman's getting started page is crystal clear.

Was it helpful?

Solution

You need to install ruby and compass. It says so right there.

  1. https://www.ruby-lang.org/en/downloads/

  2. http://compass-style.org/install/

OTHER TIPS

I have done the steps with node 0.10.20 and npm 1.3.6 without issue.

What surprised me is you have wanted: {"node":"0.8.x"} for the engine. Most of the packages requires only ">=0.8.0". Unless you have a customized package.json somewhere or the file download was corrupted.

You can watch into the npm configurations file and add the content of package.json in the question (mine are in /usr/lib/node_modules/npm on linux)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top