Setting up Yeoman project with Webstorm

In Redmart we love using Webstorm and Yeoman for AngularJS development.

I find debugging process with chrome developer tools inconvenient. Let's use Webstorm power to make life greater :)

First let's create new Node.js run configuration:

Run Configuration

  • Name: I called it 'grunt', feel free to choose any name you like.
  • Node interpreter: path defauld path on mac is 'usr/local/bin/node'
  • Working directory: a place you Gruntfile.js is located.
  • JavaScript file: a grunt itself. Default path on mac is '/usr/local/bin/grunt'
  • Application parameters: a task we want to run. In default configuration is 'serve'.
  • I highly recommend you to mark 'single instance' checkbox.

Basically we are going to run 'grunt serve' in Webstorm instead of doing it in console.

Next let's go to 'Browser / Live Edit' tab and specify the url your project runs on.

That's it. Webstorm will create two configurations ('grunt' and 'grunt JavaScript')

  • 'grunt' will be running grunt
  • 'grunt JavaScript' will be open debug panel automatically after grunt is ran.

It’s important to 'run' and not to 'debug' 'grunt' configuration

Enjoy :)