Instructions – Slack App "Hello World" in Glitch

Components

The things you need for a Slack App:
  • App-server (web-server) – the non-Slack location where your actual code runs/is hosted
  • Host Workspace – the one Slack location where you host your Slack App
    • (a.k.a., Development Slack Workspace)
  • Client Workspace(s) – any of multiple Slack locations where someone uses your Slack App

Host Workspace – Create App

Create a new Slack App

For the Development Slack Workspace drop-down, select the Workspace where you want ths Slack App to be hosted.

New Slack App

Basic Information

You will now be on:

Slack → Host Workspace → App Management → Settings section → Basic Information tab

Copy the URL of that page and paste it here:

Scroll down to the App Credentials section and copy/paste each of the specified values into the fields below for use later. (Farther down this page, you'll get text that you will be pasting into your ".env" file.)

Used when performing the OAuth Access request during the install of the App on the Host Workspace. See source file models/slack-config/oauthPromise.js

Used to validate incoming requests from Slack. See Signing secret usage. See source file utils/slack.js

Display Information

Scroll down to the Display Information section under:

Slack → Host Workspace → App Management → Settings section → Basic Information tab

Optionally change any of:

  • Short description
  • App icon & Preview
  • Background color

Host Workspace – Config Features

Required Features

This Slack App uses 5 features of Slack's API, and you will need to configure each in this order:

Bot User

Click on the "Bot Users" tab.

Slack → Host Workspace → App Management → Features section → Bot Users tab

This option will create a username and identity for your bot so that it can join channels and appear as a robotic team member.

Click on the Slack application's "Bot Users" tab. Then click on Add a Bot User.

Turn on Always Show My Bot as Online.

Make sure to click on Add Bot User.

Interactive Components

Click on the "Interactive Components" tab.

Slack → Host Workspace → App Management → Features section → Interactive Components tab

This option will allow your bot to send and receive interactive messages with buttons, menus and dialog boxes.

Click on the Slack application's "Interactive Components" tab.

Turn on Interactivity.

Click Save Changes.

Event Subscriptions

Click on the "Event Subscriptions" tab.

Slack → Host Workspace → App Management → Features section → Event Subscriptions tab

Turn on Enable Events.

Scroll down to the Subscribe to Bot Events section. Here, you will select 4 different messaging events. You can add all four of the following items after clicking on Add Bot User Event one time. Just type the first few characters of the below event, then click on it. You can then immediately type again to find the next event.

  1. message.channels
  2. message.groups
  3. message.im
  4. message.mpim

You may also want to enable other events, but these 4 are required for your bot send and receive basic messages.

Click Save Changes.

Slash Commands

Slash commands are how users communicate from Slack to your App.

Click on the "Slash Commands" tab.

Slack → Host Workspace → App Management → Features section → Slash Commands tab

Hello

This slash command will reply to the user with "world [any arguments the user entered]".

Click on Create New Command.

Leave un-checked: Escape channels, users, and links sent to your app

Finally, click Save.

OAuth & Permissions

Click on the "OAuth & Permissions" tab.

Slack → Host Workspace → App Management → Features section → OAuth & Permissions tab

Scroll down to Redirect URLs and click Add new Redirect URL. Enter this URL:

Click Add

Click Save URLs

Scroll down to the Scopes

You can add all five of the following items after clicking in the Add permission by scope or API method... field one time. Just type the first few characters of the below item, then click on it. You can then immediately type again to find the next event (you may have to delete what you typed previously.)

  1. chat:write:bot
  2. incoming-webhook
  3. bot
  4. commands (Note: if you added a Slash Command above, this scope is automatically added)
  5. users:read

Finally, click Save Changes.

You are now finished configuring Features in the Slack Host Workspace. You will be modifying Settings below.

Edit the .env File

This step will allow this project to comunicate with Slack, by adding the following info to this Glitch project's .env file. Be careful not to change the other lines in this file!

NOTE: as soon as you put these values into your ".env" file, this page of instructions will collapse.

Edit your .env file

Host Workspace – Config Settings

Configure for Distribution

At this point you can only install the App in your Host Workspace. I.e., you can skip this section if you don't need to use this App in other Workspaces. However, you must perform the following configuration to allow your App to also be installed in other Workspaces.

Click on the "Manage Distribution" tab.

Slack → Host Workspace → App Management → Settings section → Manage Distribution tab

Scroll down to Share Your App with Other Workspaces. (Note that once you Activate Public Distribution below, this will change to: Submit to the Slack App Directory.)

All items should already be checked except for Remove Hard Coded Information

Expand Remove Hard Coded Information

Check: I’ve reviewed and removed any hard-coded information.

You should now be able to click the Activate Public Distribution button.

Once you do, if you see a Submit App button at the bottom of the window, and a Submit to the Slack App Directory section, you're ready to install your app in other Slack Workspaces.

You are now finished with the Slack developer site. You can close that browser window/tab.

Host Workspace – App Installation

Install App in Host Workspace

❎ Glitch has not yet been configured correctly. You do not have the required values in your .env file. You must complete all the above steps before you can continue.

You are now ready to install the App in your Host Workspace. While you can install the App in any workspace, it is a good idea to test it out in your own workspace first. At a minimum, you should at least verify that you see the Workspace selection drop-down in the upper right, afterwitch you can click Cancel.

Add to Slack

If successful, you will see a Success page with a link that will take you to your Slack Workspace.

Client Workspace – App Installation

Install App in Client Workspace

❎ Glitch has not yet been configured correctly. You do not have the required values in your .env file. You must complete all the above steps before you can continue.

This is where you install the app so you can use it in your chosen Workspace.

When you click this button, you should be able to choose from any of the Slack Workspaces your are logged in to by using the drop-down in the upper right. If you do not see the drop-down, then you need to go back to the Configure for Distribution step.

Be sure to select a Workspace other than your Host Workspace.

Add to Slack

If successful, you will see a Success page with a link that will take you to the chosen Slack Workspace.

Thanks Botkit

Thanks to Botkit for all the valuable ideas.