« Back to home

Webstorm and using Yeoman

I did a trial for WebStorm 6 a week and a half ago and immediately fell in love with it after playing with it for a couple days.
I purchased a license for it right away during the trial period. The main feature that sold me to the IDE was the fact that it has components
and workflow to work with modern JavaScript frameworks such as jQuery, Modernizr, etc. For instance, you can have several
JavaScript frameworks and have it reusable across multiple projects. By setting a library to "global", it makes it available for
auto completion for all projects (meaning every project will automatically inherit it). Beforehand, I use Notepad++ and
Web Matrix 2 as an alternative to Visual Studio for fast web development debugging and code writing. I never really cared much about code completion (slows me down sometimes) but it helps for accessing third-party libraries. WebStorm is a very light IDE but
yet still powerful -- not to mention, it also supports multiple version control repositories such as Git, Mercurial, among many others.

WebStorm 6 has a little bit of Resharper flavor on it having used Visual Studio for a few years now. In addition, it's also packed with many features to target modern web development workflows such as testing, support for
dynamic languages such as LESS, SASS, CoffeeScript, TypeScript, etc. Similar to Visual Studio, there's
predefined project templates when creating new projects (HTML5 boilerplates) as a starting point which generates boiler plate code that uses
HTML5 boilerplates project. With this idea in mind, it inspired me to look at Yeoman once again and make it part of my web development

Yeoman is basically a scaffolding tool that works with Grunt and Bower to complete a modern web development work flow (ie brings in configuration to make your application work nicely with Grunt and Bower). Bower is
a dependency management tool similar to Node Package Management or NPM which automatically pulls the library as well as its dependencies.

Grunt on the other hand is a test runner, build tool (generates a deployment folder which contains a production ready version of your application), and a whole lot of automation types of tasks. Grunt and Bower are powerful tools in their own rights and does
a lot more things that I mentioned above but Yeoman sorta brings them together. Playing with these three tools for a few days,
I've come up with steps/commands to accomplish certain steps. I'll provide a list of commands that I have put together meant as a sticky note
so I can reference them over and over again easily.

As a side note, the commands used are in Windows OS and command line (either the default command line or Node.js command prompt
works good). If you don't have NodeJS installed on your system already, you can check out the website and need to have it installed. It will
include NPM which is an indispensable tool and is very popular in the open source community.

To install the tools:

Install Yeoman.

\> npm install yo -g // The -g attribute installs the component globally

Install Bower.

\> npm install bower -g

Installing Grunt according to their documentation requires a few steps. When working with a new project, you can execute the following

\> npm uninstall grunt -g // Only if you have Grunt previously installed

\> npm install grunt-cli -g

For existing projects that already has package.json and Gruntfile.json (task configurations, plugins, etc):

\> npm install grunt --save-dev

Yeoman commands:

To scaffold a new generic app.

\> yo webapp

To list all the Yeoman generators.

\> npm search yeoman-generator

Once you find a generator that you want to install, you can install it via NPM by

\> npm install -g generator-angular // Angular JS for example.

\> npm install -g generator-backbone generator-backbone-amd // Backbone JS

You can then scaffold a new project using the generator. (You have to do CD to and be at the root of your project directory).

\> yo angular

Bower commands:

Bower is similar to NPM where it manages libraries and dependencies as packages that can be installed globally or per project
To install a library such as angular.

\> bower install angular // Gets the latest version

To install a specific version of a library.

\> bower install angular\#1.1 // This will install a specific version

To install from a GitHub repo.

\> bower install git://github.com/components/jquery.git // Installs from GitHub

To update a package.

\> bower update angular

To list all installed packages.

\> bower list

To search the Bower repository for specific packages.

\> bower search [name]    

Grunt commands:

Grunt can do a lot of things such as starting up a web server for testing, running test, executing tasks, etc.

To perform a project build and compiles a project for deployment (JS minification, CSS minification, etc).

\> grunt --force // The force parameter ignores warning and will continue the build.

To perform a test

\> grunt test

To run a server instance

\> grunt server

The commands above are the most common usage of the Yeoman, Bower and Grunt. There's a lot
more things that weren't covered but for starters, this should be a good base line when trying to make these tools
part of your web development work flow.


comments powered by Disqus