Cloudflare worker Discord bot

• Original code by @justinbeckwith

Tips:

• Clone locally
• Install wrangler
• CLOUDFLARE_ACCOUNT_ID= CLOUDFLARE_API_TOKEN= wrangler publish to publish
  • Or just push changes to GitHub and it will publish automatically
• If you update commands.js, push to GitHub so that it runs register.js script to push changes to Discord
• ... wrangler tail to see logs
• ... wrangler kv:* commands should also work

See similar tutorial on Discord docs.

Resources used

• Discord Interactions API
• Cloudflare Workers for hosting
• Reddit API to send messages back to the user

---

Project structure

Below is a basic overview of the project structure:

├── .github/workflows/ci.yaml -> Github Action configuration
├── src
│   ├── commands.js           -> JSON payloads for commands
│   ├── reddit.js             -> Interactions with the Reddit API
│   ├── register.js           -> Sets up commands with the Discord API
│   ├── server.js             -> Discord app logic and routing
├── test
|   ├── test.js               -> Tests for app
├── wrangler.toml             -> Configuration for Cloudflare workers
├── package.json
├── README.md
├── renovate.json             -> Configuration for repo automation
├── .eslintrc.json
├── .prettierignore
├── .prettierrc.json
└── .gitignore

Configuring project

Before starting, you'll need a Discord app with the following permissions:

• Select bot, then Send Messages, Use Slash Command permissions
• applications.commands scope
• Click on the OAuth2 tab and use the URL Generator. After a URL is generated, you can install the app by pasting that URL into your browser and following the installation flow.

Creating your Cloudflare worker

Next, you'll need to create a Cloudflare Workers

• Visit the Cloudflare dashboard
• Click on the Workers tab, and create a new service using the same name as your Discord bot
• Make sure to install the Wrangler CLI and set it up.
• Create new KV namespace in Cloudflare (used for data storage).
  • Then bind to worker by updating KV Namespace Bindings, add "KV_STORAGE" (global variable name), binded to newly created KV namespace.

Update interactions URL in Discord app settings

• Copy Cloudflare app URL (e.g. https://discord-bot.namespace.workers.dev) and paste into the Interactions Endpoint URL field in the Discord App settings.

Update wrangler.toml

• Update wrangler.toml account_id and kv_namespaces IDs.

Storing secrets

💡 More information about generating and fetching credentials can be found in the tutorial

The production service needs access to credentials from your app:

$ wrangler secret put DISCORD_TOKEN
$ wrangler secret put DISCORD_PUBLIC_KEY
$ wrangler secret put DISCORD_APP_ID
$ wrangler secret put DISCORD_TEST_GUILD_ID

Verify secrets were saved in Cloudflare Dashboard under variables tab.

Running locally

‼️ This depends on the beta version of the wrangler package, which better supports ESM on Cloudflare Workers.

First clone the project:

git clone https://github.com/discord/cloudflare-sample-app.git

Then navigate to its directory and install dependencies:

cd cloudflare-sample-app
npm install

⚙️ The dependencies in this project require at least v16 of Node.js

Register commands

The following command only needs to be run once:

$ DISCORD_TOKEN=<your-token> DISCORD_APP_ID=<your-app-id> node src/register.js

Run app

Now you should be ready to start your server:

$ npm run dev

Setting up ngrok

When a user types a slash command, Discord will send an HTTP request to a given endpoint. During local development this can be a little challenging, so we're going to use a tool called ngrok to create an HTTP tunnel.

$ npm run ngrok

This is going to bounce requests off of an external endpoint, and forward them to your machine. Copy the HTTPS link provided by the tool. It should look something like https://8098-24-22-245-250.ngrok.io. Now head back to the Discord Developer Dashboard, and update the "Interactions Endpoint URL" for your bot:

This is the process we'll use for local testing and development. When you've published your bot to Cloudflare, you will want to update this field to use your Cloudflare Worker URL.

Deploying app

This repository is set up to automatically deploy to Cloudflare Workers when new changes land on the main branch. To deploy manually, run npm run publish, which uses the wrangler publish command under the hood. Publishing via a GitHub Action requires obtaining an API Token and your Account ID from Cloudflare. These are stored as secrets in the GitHub repository, making them available to GitHub Actions. The following configuration in .github/workflows/ci.yaml demonstrates how to tie it all together:

release:
  if: github.ref == 'refs/heads/main'
  runs-on: ubuntu-latest
  needs: [test, lint]
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: 16
    - run: npm install
    - run: npm run publish
      env:
        CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
        CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}