slack-samples / bolt-js-starter-template

A template for building Slack apps with Bolt for JavaScript

Bolt for JavaScript Template App

This is a generic Bolt for JavaScript template app used to build out Slack apps.

Before getting started, make sure you have a development workspace where you have permissions to install apps. If you don’t have one setup, go ahead and create one.

Installation

Create a Slack App

1. Open https://api.slack.com/apps/new and choose "From an app manifest"
2. Choose the workspace you want to install the application to
3. Copy the contents of manifest.json into the text box that says *Paste your manifest code here* (within the JSON tab) and click Next
4. Review the configuration and click Create
5. Click Install to Workspace and Allow on the screen that follows. You'll then be redirected to the App Configuration dashboard.

Environment Variables

Before you can run the app, you'll need to store some environment variables.

1. Rename .env.sample to .env
2. Open your apps configuration page from this list, click OAuth & Permissions in the left hand menu, then copy the Bot User OAuth Token into your .env file under SLACK_BOT_TOKEN
3. Click Basic Information from the left hand menu and follow the steps in the App-Level Tokens section to create an app-level token with the connections:write scope. Copy that token into your .env as SLACK_APP_TOKEN.

Setup Your Local Project

# Clone this project onto your machine
git clone https://github.com/slack-samples/bolt-js-starter-template.git

# Change into this project directory
cd bolt-js-starter-template

# Install dependencies
npm install

# Run Bolt server
npm start

Linting

# Run eslint for code formatting and linting
npm run lint

Project Structure

manifest.json

manifest.json is a configuration for Slack apps. With a manifest, you can create an app with a pre-defined configuration, or adjust the configuration of an existing app.

app.js

app.js is the entry point for the application and is the file you'll run to start the server. This project aims to keep this file as thin as possible, primarily using it as a way to route inbound requests.

/listeners

Every incoming request is routed to a "listener". Inside this directory, we group each listener based on the Slack Platform feature used, so /listeners/shortcuts handles incoming Shortcuts requests, /listeners/views handles View submissions and so on.

App Distribution / OAuth

Only implement OAuth if you plan to distribute your application across multiple workspaces. A separate app-oauth.js file can be found with relevant OAuth settings.

When using OAuth, Slack requires a public URL where it can send requests. In this template app, we've used ngrok. Checkout this guide for setting it up.

Start ngrok to access the app on an external network and create a redirect URL for OAuth.

ngrok http 3000

This output should include a forwarding address for http and https (we'll use https). It should look something like the following:

Forwarding   https://3cb89939.ngrok.io -> http://localhost:3000

Navigate to OAuth & Permissions in your app configuration and click Add a Redirect URL. The redirect URL should be set to your ngrok forwarding address with the slack/oauth_redirect path appended. For example:

https://3cb89939.ngrok.io/slack/oauth_redirect

bolt-js-starter-template's Issues

ERROR: Running the `get-hooks` hook (sdk_config_load_error)

I received the following error when running the slack run command using the bolt-js-starter-template -b future

Slack Version: Using slack v2.9.1

slack run
Check {REDACTED} for full error logs

🚫 There was an error while reading the Slack Configuration file (`slack.json`) or running the `get-hooks` hook (sdk_config_load_error)

Error Details:

1: There was an error while reading the Slack Configuration file (`slack.json`) or running the `get-hooks` hook (sdk_config_load_error)
Suggestion: Run `slack doctor` to check that your system dependencies are up-to-date.


Suggestion:

Run `slack doctor` to check that your system dependencies are up-to-date.

I then tried running the slack doctor

slack doctor
Check {REDACTED} for full error logs

🚫 There was an error while reading the Slack Configuration file (`slack.json`) or running the `get-hooks` hook (sdk_config_load_error)

Error Details:

1: There was an error while reading the Slack Configuration file (`slack.json`) or running the `get-hooks` hook (sdk_config_load_error)
Suggestion: Run `slack doctor` to check that your system dependencies are up-to-date.


Suggestion:

Run `slack doctor` to check that your system dependencies are up-to-date.

This is the content of the slack.json file

{
  "hooks": {
    "get-hooks": "npx -q --no-install -p @slack/bolt slack-cli-get-hooks"
  }
}

I am also unable to run slack version or any slack CLI command inside the same directory as they all fail with the same error. Running slack doctor outside of the directory works without any issues and I proceed as normal.

Need to update ngrok guide URL

The tunneling-with-ngrok guide link redirects to the Responding to app mentions track which doesn't (or no longer) includes steps to setup ngrok.

I am not sure such a guide exists any longer on our API docs site.

https://github.com/slackapi/bolt-js-template/blob/d0638163fa715eaafbe23788ab67c769bd57b146/README.md?plain=1#L49

Error: Unable to find a manifest file in this project

When running the Slack CLI command to create a new Bolt.js app, I'm getting the error "Unable to find a manifest file in this project". I have tried renaming the file to manifest.ts and get the same error as when using a manifest.js. I have moved the manifest file out of the manifest folder and into the slack app root, and receive the same issue. It seems there is some issue in the getManifestData method. Any idea what could be causing this?

Add ESLint

To aid efforts in producing apps with a more consistent look and feel regardless of who built them, introduce ESLint. This will also take the opinion and guess work out of determining what code-style is acceptable vs. not and prevent last-minute style refactors.