How to use Hubot with Slack to build, debug, and deploy to Heroku in a local environment
Tags: hubot, slack
Published: 2020-05-28 05:18:07

---
title: How to use Hubot with Slack to build, debug, and deploy to Heroku in a local environment
published: true
description: 
tags: Hubot, Slack 
---

# 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

```sh
> 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<hogehoge@example.com>"
```

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	

```sh
# 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.

```sh
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

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

![screenshot 2017-01-25 14.26.03.png](https://qiita-image-store.s3.amazonaws.com/0/5390/caa0741a-4cfc-d348-1916-f30b2229c9ed.png)


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](https://ngrok.com/).

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