Building My First Webapp with Yeoman
08/02/2015 Sean Cole Comments 0
Yesterday I reinstalled nodejs on Ubuntu 14.04 so that I could install node packages without root. This is important for yeoman to work correctly, if you are having troubles with yeoman, I would suggest reading the aforementioned article. While reinstalling nodejs I also installed yeoman and the webapp generator. Today I ran the webapp generator and am planning on installing grunt and bower. This is my first exposure to each of these packages, including yeoman, and this is my experience with them.
First, some context. I’m following along with this video, Master Front-End Workflow with Yeoman, Grunt and Bower. I’ve just run the webapp generator to scaffold my test directory with SASS and Bootstrap. I’m now going to try starting up the grunt server.
$ yo webapp ... $ grunt serve ... grunt: command not found
Odd, grunt is in my
I tried a few things, including installing grunt globally and flushing bash’s hash table again, before I decided to look this up. Apparently the command line tools are not included with the latest versions of grunt. Something about ensuring that the cli doesn’t interfere with whatever version of grunt you are deciding to run. Makes sense, but there should be some warning after installing grunt that this step is necessary.
$ npm install -g grunt-cli ... $ grunt --version grunt-cli v0.1.13 grunt v0.4.5
Now that I have the
grunt-cli installed, I should hopefully be able to start the server.
$ grunt serve ... Running "wiredep:app" (wiredep) task Warning: Error: Cannot find where you keep your Bower packages. Use --force to continue. Aborted due to warnings.
OK, so maybe I need to install bower.
After checking my
node_modules directory again, and not finding a bower package, I determined that this was indeed the case. Seems like this should be a dependency added into the
$ bower -v bower: command not found $ npm install -g bower $ bower -v 1.4.1 $ grunt serve ... Running "wiredep:app" (wiredep) task Warning: Error: Cannot find where you keep your Bower packages. Use --force to continue. Aborted due to warnings.
Definitely needed bower installed, but that doesn’t appear to have solved the issue. I’m out of ideas, time to turn to Google.
Odd as it sounds, the solution I found that worked was to update
grunt-wiredep and then have bower install jQuery. I know bootstrap requires jQuery, but it seems odd that it should prevent the grunt server from working. After all, its not necessary for the server, just for the app. But I guess it is better to fail early.
$ npm install -g grunt-wiredep ... $ bower install jquery ... $ grunt wiredep ... Done, without errors. ...
Again with the missing dependencies, this time in the
bower.json file. Would this be considered a
yeoman issue, or a
generator-webapp issue? I’m leaning more towards webapp, even though the webapp repository clearly notes this as a required dependency it doesn’t include it in the bower file. But then, since it is a requirement of bootstrap, is it then bootstrap’s fault?
Fourth time’s the charm?
$ grunt serve ... Running "watch" task Waiting...
Everything appears to be working fine now.
I can modify files and the changes immediately appear in my browser. It even uses browsersync instead of livereload, which means I can sync my browsers across all my devices. I’ve used browsersync before, but that never gets old.
I want to run one last test before calling this done. I want to try running the build command.
$ grunt build ... Done, without errors. ...