How to use Hubot with Slack to build, debug, and deploy to Heroku in a local environment

Introduction.

It's been a few years since the hubot appeared, and it's become a lot easier to set up.
Also, the version of the node is up and the method of local debugging became much easier, so I'll share the method again.

Preliminaries.

• You should already be using slack and know how to use it to some extent.
• You must have a Heroku account.

Local environment construction

execution environment

node and npm must be installed, and each version at the time of development is

• Running OS: OSX Sierra
• node: v7.4.0.
• npm: 3.10.10

Installing hubot generator

npm install -g yo generator-hubot

Creating a hubot project

> mkdir myhubot
> cd myhubot

# I'm going to make the bot's name as Hubot and put together descriptio and owner settings while cooperating with slack.
# It will listen to your input interactively without setting any options here.
> yo hubot --adapter=slack --name="Hubot" --description="hogehoge" --owner="kon_yu<[e-mail]>"

When you execute yo hubot command, if you set the bot name to "hubot" with the --name option, you will get an error which I don't understand.

Hubot startup and operation check

# hubot startup
bin/hubot

# In the meantime, make sure that the echo command works
Hubot> hubot echo "aaa"
Hubot> "aaa"

Working with Slack

Settings from the Slack administration screen

Select Configure Apps from the menu on the far left of Slack's admin screen, and
Select Hubot from the Apps
Set the display name on Hubot's Slack with the username displayed when you select it (I'm going to use hubot here).
Press Add Configration button and select an appropriate channel for Hubot to post to (such as general).

Copy the environment variables in the Setup Instructions section.

Press the Save Integration button at the bottom of the screen to complete the setup.

Add a Channel that you want Hubot to speak to on Slack

Start Slack, open the Channel you want Hubot to speak, and invite the Hubot's name (hubot) that you set up earlier to the channel in the message window.

/invite @hubot

In Slack's Hubot settings screen, you can see the channels you have invited are added to the Channels section.

Calling a hubot from Slack

Set the environment variable (HUBOT_SLACK_TOKEN) copied when starting Hubot from the local terminal, and set the adapter setting to "slack" and start it.

HUBOT_SLACK_TOKEN=xoxb-YOUR-TOKEN-HERE . /bin/hubot --adapter slack

(Reference) https://slackapi.github.io/hubot-slack/#running-hubot

Setting up the debug environment

In order to debug it, you need to use the coffee command instead of starting it with bin/node.

Install a command to run the coffee script

npm install -g coffee-script

If you run the Hubot command locally
--inspect is the point

coffee --nodejs --inspect node_modules/.bin/hubot

When typing a Hubot command on Slack

HUBOT_SLACK_TOKEN=xoxb-YOUR-TOKEN-HERE coffee --nodejs --inspect node_modules/.bin/hubot --adapter slack

Create the original command

Copy the example.coffee under the scripts directory to create a sample.coffee file

The following changes were made to sample.coffee

module.exports = (robot) ->
  robot.respond /who are you/i, (msg) ->
   　msg.send "I'm hubot!"

Start a hubot with a slack adapter (with -a slack) in a debugging manner.

> HUBOT_SLACK_TOKEN=xoxb-YOUR-TOKEN-HERE coffee --nodejs --inspect node_modules/.bin/hubot --adapter slack
Warning: This is an experimental feature and could change at any time.
Warning: This is an experimental feature and could change at any time.
Warning: This is an experimental feature and could change at any time:
    chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/c9bc2176-7ce4-4d18-a9eb-de23caa2790d
Hubot> [Wed Jan 25 2017 14:21:51 GMT+0900 (JST)] INFO /Users/kon_yu/development/myhubot/scripts/backlog.coffee is using deprecated documentation syntax
[Wed Jan 25 2017 14:21:51 GMT+0900 (JST)] WARNING Loading scripts from hubot-scripts.json is deprecated and will be removed in 3.0 (https://github.com/github/hubot-scripts/issues/1113) in favor of packages for each script.

WARNING Loading scripts from hubot-scripts.json is deprecated and will be removed in 3.0 () in favor of packages for each script.
[Wed Jan 25 2017 14:21:51 GMT+0100 (JST)] ERROR hubot-heroku-alive included, but missing HUBOT_HEROKU_KEEPALIVE_URL. `heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=$(heroku apps:info -s | grep web-url | cut -d= -f2)`
[Wed Jan 25 2017 14:21:51 GMT+0900 (JST)] INFO hubot-redis-brain: Using default redis on localhost:6379
[Wed Jan 25 2017 14:21:51 GMT+0900 (JST)] INFO hubot-redis-brain: Data for hubot brain retrieved from Redis

Find the string that follows from cherome-devetools:// in the log displayed at runtime, and open it in the chrome browser, as shown below

chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/c9bc2176-7ce4-4d18-a9eb-de23caa2790d

If you open it with Chrome browser, you can put a breakpoint in the source code of the script, and you can develop it while checking the contents of the variables.

If you type a message like the one below on the slack

@hubot who are you

I can confirm that the hubot will return a response

I'm hubot.

How to debug integration with external services using Webhook

Install ngrok.

You need to use Webhook to connect to the local machine from an external service via http.
An easy way to do that is with ngrok.

You should install homebrew and homebrew-cask in advance.

Install homebrew

> /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installation of homebrew-cask

> brew install caskroom/cask/brew-cask

Installing ngrok

brew cask install ngrok

Start ngrok and launch it to connect to the 8080 port on the local machine

By using the following command, you can access http://eb96e826.ngrok.io to connect to the local machine's port 8080.
The "eb96e826" at http://eb96e826.ngrok.io is a subdomain that is automatically determined by ngrok.

> ngrok http 8080
ngrok by @inconshreveable (Ctrl+C to quit)

Session Status online
Account kon_yu (Plan: Free)
Version 2.2.4
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://eb96e826.ngrok.io -> localhost:8080