Developing Hubot with WebStorm

TL;DR
- Basic steps to setting up WebStorm for Hubot development


I recently started developing Hubot Scripts, and it’s been fun to learn how to code in CoffeeScript, and integrate Hubot Scripts with Slack for our team. However, it didn’t start out as easy as I thought to set up my computer for development and debugging for Hubot with CoffeeScript. The steps below are the setup and tricks that I had to go through in order to start debugging Hubot like a normal node.js project. Enjoy :)

Insall/Setup

1 Install yeoman generator for hubot and create a scaffold hubot project:

> npm install -g generator-hubot
> mkdir hubot && cd hubot
hubot > yo hubot  
➜  hubot  yo hubot
...
...
CoffeeScript configuration

2 To run Hubot from WebStorm, we have to first add the configuration for execution. Click Run from the menu and click Edit Configuration

1

3 Click + to add a Node.js configuration

2

4 For JavaScript File, enter node_modules/hubot/bin/hubot. Check Run with CoffeeScript plugin, and for path to coffee executable enter ~YOURDIRECTORY/hubot/node_modules/hubot/node_modules/coffee-script/bin/coffee

3

5 Now check scripts/example.coffee, and click Add watcher if you see the message. If you don't see it, we'll set it up a few steps from now, but if you already have CoffeeScript filewatcher setup, feel free to skip to 11.

4

6 After clicking on Add watcher, click on OK to watch on example.coffee

5

7 Now try to modify example.coffee, and you will see an example.js and example.js.map file generated by WebStorm. The example.js is essentially the transpiled file from example.coffee when example.coffee gets modified.

6

8 To setup CoffeeScript file watcher, go under WebStorm > Preference > Tools > File Watchers > CoffeeScript

9

9 WebStorm should automatically set up Arguments and Output paths to refesh for you. The only thing you have to make sure of is that the path for your global CoffeeScript is executable. Mine is under /usr/local/bin/coffee

8

10 Click Apply to save

7

Debug configuration

11 Go under ~YOURDIRECTORY/hubot/node_modules/hubot/bin, and copy hubot to hubot.coffee, and now hubot.js and hubot.js.map should be generated automatically.

10

12 Like step 2, add another Node.js, but this time, enter node_modules/hubot/bin/hubot for JavaScript File.

12

13 And now, we have to make sure all the files under node_modules are transpiled into javascript. We can do this small trick to touch all the CoffeeScript files and force file watcher to generate the js files:

find . -type f -name "*.coffee" -exec touch {} \;  

11

14 For example, set a breakpoint in hubot.js on robot.run() start debugging

13

15 And it will stop on the equivalent line in hubot.coffee and display all variables just like a normal node.js project :)

15

comments powered by Disqus