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.

Installing Grunt

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 node_modules directory.

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.

Installing Bower

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 package.json file.

$ 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.

Fixing Wiredep

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?

Serving Grunt

Fourth time’s the charm?

$ grunt serve
...
Running "watch" task
Waiting...

Conclusion

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.
...

You Might Also Enjoy:

Discussion

Join the Discussion

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax