This text guides you on find out how to construct a distant perform for Slack’s automation platform on Cloudflare Workers. The slack-cloudflare-workers library offers the toolset for swiftly creating such an app in TypeScript.
Clone the instance undertaking
git clone git@github.com:seratch/slack-remote-functions-on-cloudflare.git
cd slack-remote-functions-on-cloudflare/
Create a brand new remote-funtion app
As of November 2023, it’s worthwhile to make the most of both Slack CLI instructions or apps.manifest.create API when initiating the event of a brand new Slack app that gives distant features. This information reveals find out how to carry out the API name with out putting in Slack CLI.
Create Cloudflare Tunnel for native improvement
On this information, you’ll first affirm whether or not the app features as anticipated in your native machine, earlier than deploying the app on Cloudflare Staff. To perform this easily, you may must amend the app’s manifest information to make the most of the general public URLs of the native app.
Begin by initiating a brand new tunnel for native improvement. You are able to do this by executing the next command:
# For different platforms: https://builders.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/
brew set up cloudflare/cloudflare/cloudflared
cloudflared tunnel --url http://localhost:3000
Then, you will note the outputs like this:
$ cloudflared tunnel --url http://localhost:3000
2023-11-23T08:33:52Z INF Thanks for attempting Cloudflare Tunnel. Doing so, with no Cloudflare account, is a fast method to experiment and take a look at it out. Nevertheless, bear in mind that these account-less Tunnels don't have any uptime assure. When you intend to make use of Tunnels in manufacturing it is best to use a pre-created named tunnel by following: https://builders.cloudflare.com/cloudflare-one/connections/connect-apps
2023-11-23T08:33:52Z INF Requesting new fast Tunnel on trycloudflare.com...
2023-11-23T08:33:53Z INF +--------------------------------------------------------------------------------------------+
2023-11-23T08:33:53Z INF | Your fast Tunnel has been created! Go to it at (it might take a while to be reachable): |
2023-11-23T08:33:53Z INF | https://maps-victim-warm-registration.trycloudflare.com |
2023-11-23T08:33:53Z INF +--------------------------------------------------------------------------------------------+
2023-11-23T08:33:53Z INF Can not decide default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp /etc/cloudflared /usr/local/etc/cloudflared]
2023-11-23T08:33:53Z INF Model 2023.8.2
2023-11-23T08:33:53Z INF GOOS: darwin, GOVersion: go1.20.7, GoArch: amd64
2023-11-23T08:33:53Z INF Settings: map[ha-connections:1 protocol:quic url:http://localhost:3000]
2023-11-23T08:33:53Z INF cloudflared won't routinely replace when run from the shell. To allow auto-updates, run cloudflared as a service: https://builders.cloudflare.com/cloudflare-one/connections/connect-apps/run-tunnel/as-a-service/
2023-11-23T08:33:53Z INF Generated Connector ID: 65df45f4-8ab7-48fd-ad0b-4e52847c5924
2023-11-23T08:33:53Z INF Preliminary protocol quic
2023-11-23T08:33:53Z INF ICMP proxy will use 192.168.68.112 as supply for IPv4
2023-11-23T08:33:53Z INF ICMP proxy will use fe80::10a5:5e5a:9e14:f080 in zone en0 as supply for IPv6
2023-11-23T08:33:53Z INF Created ICMP proxy listening on 192.168.68.112:0
2023-11-23T08:33:53Z INF Created ICMP proxy listening on [fe80::10a5:5e5a:9e14:f080%en0]:0
2023-11-23T08:33:53Z INF Beginning metrics server on 127.0.0.1:61237/metrics
2023-11-23T08:33:53Z WRN Your model 2023.8.2 is outdated. We advocate upgrading it to 2023.10.0
2023-11-23T08:33:54Z INF Registered tunnel connection connIndex=0 connection=d6531124-06de-4034-9f30-058c7a14e8a7 occasion=0 ip=198.41.200.23 location=kix04 protocol=quic
On this case, https://maps-victim-warm-registration.trycloudflare.com/ is the general public URL receiving requests from Slack. Open src/manifest.ts and exchange the 2 request_url: "https://TODO.trycloudflare.com/" components within the code with this string.
Carry out an apps.manifest.create API name
Alright, the manifest information is now ready, so let’s proceed to make the API name.
Head to https://api.slack.com/reference/manifests#config-tokens and seize your refresh token:
You’ll use .env file situated within the root listing of this undertaking.
echo 'SLACK_TOOLING_REFRESH_TOKEN=xoxe-1-...' > .env
Let’s use Bun for shortly working src/manifest.ts. When you’re on macOS, the next instructions arrange the bun command for you:
brew set up bun
bun add -d bun-types
Every little thing is about! Execute the command offered beneath to create a brand new Slack app with distant features:
bun run src/manifest.ts
If every little thing goes effectively, you will note a mesage like !!! Go to https://api.slack.com/apps/{app_id} to put in the app !!! on the terminal. Click on the URL and set up the app into your Slack workspace.
Configure secrets and techniques
To configure your app, copy the next two secrets and techniques:
- SLACK_SIGNING_SECRET: Settings > Primary Info > App Credentials > Signing Secret
- SLACK_BOT_TOKEN: Settings > Set up App > Bot Person OAuth Token
To run the app domestically, create .dev.vars file with the next content material:
SLACK_SIGNING_SECRET=...
SLACK_BOT_TOKEN=xoxb-...
SLACK_LOGGING_LEVEL=DEBUG
Run the app in your native machine
Once you hit npm begin on the termimnal, you will note the outputs like this:
$ npm begin
> my-remote-func@0.0.0 begin
> wrangler dev --port 3000
⛅️ wrangler 3.17.1
-------------------
Utilizing vars outlined in .dev.vars
Your employee has entry to the next bindings:
- Vars:
- SLACK_SIGNING_SECRET: "(hidden)"
- SLACK_BOT_TOKEN: "(hidden)"
- SLACK_LOGGING_LEVEL: "(hidden)"
⎔ Beginning native server...
[mf:inf] Prepared on http://*:3000
[mf:inf] - http://127.0.0.1:3000
[mf:inf] - http://192.168.68.112:3000
[mf:inf] - http://localhost:3000
[mf:inf] - http://[::1]:3000
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] flip off native mode, [c] clear console, [x] to exit │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
As soon as your distant perform has been put in to your Slack workspace or group, you’ll be able to make the most of the customized step within the Workflow Builder as follows:
Share the set off URL for the workflow both in a channel or a canvas doc. Clicking the hyperlink button initiates the workflow. The execution of your customized step inside this workflow triggers a ‘function_executed’ occasion in your Cloudflare Staff app.
Deploy the app
Now that the app is working, you’ll be able to deploy this app onto Cloudflare Staff as a service prepared for manufacturing. To take action, execute the instructions talked about beneath. You’ll be able to go together with the secrets and techniques which are already out there within the dev.vars file.
wrangler deploy
wrangler secret put SLACK_SIGNING_SECRET
wrangler secret put SLACK_BOT_TOKEN
Lastly, head to https://api.slack.com/apps/{app_id} and finalize the 2 request URLs (Interactivity & Shortcuts, Occasion Subcriptions) to make use of the Cloudflware Staff URL like https://slack-remote-functions-on-cloudflare.{your account right here}.employees.dev.
Construct your individual distant perform
The examples contained on this repo illustrate using buttons and modal views. But, if such engagement is just not required to your use case, you’ll be able to merely consolidate all neccessary logic into the app.perform(callbackId) listener and take away different app.motion/app.view listeners.
Please word, it’s essential to name both features.completeSuccess or features.completeError API. This motion is required to instruct Slack’s workflow to proceed to the following step, or abort the workflow execution respectively. You’ll be able to seek advice from src/index.ts for steering on find out how to implement these API calls inside the code.
Get pleasure from!