Merge pull request #3 from slack-samples/initial-submission

Initial submission

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 .DS_Store
-.env*
+.env
 dist

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Slack Technologies, Inc.
+Copyright (c) 2024 Slack Technologies, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,69 +1,92 @@
-# Bolt for JavaScript (TypeScript) Template App
+# Bolt for JavaScript (TypeScript) Custom Function Template
 
-This is a generic Bolt for JavaScript (TypeScript) template app used to build out Slack apps.
+This is a Bolt for JavaScript (TypeScript) template app used to build custom functions for
+use in [Workflow Builder](https://api.slack.com/start#workflow-builder).
 
-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](https://slack.com/create).
+## Setup
+
+Before getting started, first make sure you have a development workspace where
+you have permission to install apps. **Please note that the features in this
+project require that the workspace be part of
+[a Slack paid plan](https://slack.com/pricing).**
+
+### Developer Program
+
+Join the [Slack Developer Program](https://api.slack.com/developer-program) for
+exclusive access to sandbox environments for building and testing your apps,
+tooling, and resources created to help developers build and grow.
 
 ## Installation
 
-#### Create a Slack App
+### Create a Slack App
 
-1. Open [https://api.slack.com/apps/new](https://api.slack.com/apps/new) and choose "From an app manifest"
+1. Open [https://api.slack.com/apps/new](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](./manifest.json) into the text box that says `*Paste your manifest code here*` (within the JSON tab) and click _Next_
+3. Copy the contents of [manifest.json](./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.
+5. Click _Install_ button and _Allow_ on the screen that follows. You'll then be
+   redirected to the App Settings dashboard.
 
-#### Environment Variables
+### Environment Variables
 
 Before you can run the app, you'll need to store some environment variables.
 
-1. Copy `env.sample` to `.env`
-2. Open your apps configuration page from [this list](https://api.slack.com/apps), 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`.
+1. Rename `.env.sample` to `.env`
+2. Open your apps setting page from
+   [this list](https://api.slack.com/apps), 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`.
 
-#### Install Dependencies
+### Local Project
 
-`npm install`
+```zsh
+# Clone this project onto your machine
+git clone https://github.com/slack-samples/bolt-ts-custom-function-template.git
 
-#### Run Bolt Server
+# Change into this project directory
+cd bolt-ts-custom-function-template
 
-`npm start`
+# Install dependencies
+npm install
 
-## 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.ts`
-
-`app.ts` 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.
+# Run Bolt server
+npm start
+```
 
-### `/listeners`
+### Linting
 
-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](https://api.slack.com/interactivity/shortcuts) requests, `/listeners/views` handles [View submissions](https://api.slack.com/reference/interaction-payloads/views#view_submission) and so on.
+Run ESLint for code formatting and linting:
 
-## App Distribution / OAuth
+```zsh
+npm run lint
+```
 
-Only implement OAuth if you plan to distribute your application across multiple workspaces. A separate `app-oauth.ts` file can be found with relevant OAuth settings.
+## Using Steps in Workflow Builder
 
-When using OAuth, Slack requires a public URL where it can send requests. In this template app, we've used [`ngrok`](https://ngrok.com/download). Checkout [this guide](https://ngrok.com/docs#getting-started-expose) for setting it up.
+With your server running, your function is now ready for use in
+[Workflow Builder](https://api.slack.com/start#workflow-builder)! Add it as a
+custom step in a new or existing workflow, then run the workflow while your app
+is running.
 
-Start `ngrok` to access the app on an external network and create a redirect URL for OAuth.
+For more information on creating workflows and adding custom steps, read more
+[here](https://slack.com/help/articles/17542172840595-Create-a-new-workflow-in-Slack).
 
-```
-ngrok http 3000
-```
+## Project Structure
 
-This output should include a forwarding address for `http` and `https` (we'll use `https`). It should look something like the following:
+### `app.ts`
 
-```
-Forwarding   https://3cb89939.ngrok.io -> http://localhost:3000
-```
+`app.ts` 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.
 
-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:
+### `manifest.json`
 
-```
-https://3cb89939.ngrok.io/slack/oauth_redirect
-```
+`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.ts

@@ -1,8 +1,7 @@
-import { App, LogLevel } from '@slack/bolt';
-import * as dotenv from 'dotenv';
-import registerListeners from './listeners';
+import { App, BlockAction, LogLevel } from '@slack/bolt';
+import { config } from 'dotenv';
 
-dotenv.config();
+config();
 
 /** Initialization */
 const app = new App({
@@ -12,15 +11,65 @@ const app = new App({
   logLevel: LogLevel.DEBUG,
 });
 
-/** Register Listeners */
-registerListeners(app);
+/** Sample Function Listener */
+app.function('sample_function', async ({ client, inputs, fail }) => {
+  try {
+    const { user_id } = inputs;
+
+    await client.chat.postMessage({
+      channel: user_id as string,
+      text: 'Click the button to signal the function has completed',
+      blocks: [
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Click the button to signal the function has completed',
+          },
+          accessory: {
+            type: 'button',
+            text: {
+              type: 'plain_text',
+              text: 'Complete function',
+            },
+            action_id: 'sample_button',
+          },
+        },
+      ],
+    });
+  } catch (error) {
+    console.error(error);
+    fail({ error: `Failed to handle a function request: ${error}` });
+  }
+});
+
+/** Sample Action Listener */
+app.action<BlockAction>('sample_button', async ({ body, client, complete, fail }) => {
+  const { channel, message, user } = body;
+
+  try {
+    // Functions should be marked as successfully completed using `complete` or
+    // as having failed using `fail`, else they'll remain in an 'In progress' state.
+    // Learn more at https://api.slack.com/automation/interactive-messages
+    await complete!({ outputs: { user_id: user.id } });
+
+    await client.chat.update({
+      channel: channel!.id,
+      ts: message!.ts,
+      text: 'Function completed successfully!',
+    });
+  } catch (error) {
+    console.error(error);
+    fail!({ error: `Failed to handle a function request: ${error}` });
+  }
+});
 
-/** Start Bolt App */
+/** Start the Bolt App */
 (async () => {
   try {
-    await app.start(process.env.PORT || 3000);
-    console.log('⚡️ Bolt app is running! ⚡️');
+    await app.start();
+    console.log('⚡️ Bolt app is running!');
   } catch (error) {
-    console.error('Unable to start App', error);
+    console.error('Failed to start the app', error);
   }
 })();