Implementing a custom react renderer (react-reconciler) to render Slack components, similar to what we have with react-dom (host is DOM) and react-native (hosts are native mobile platforms)
Create a .env file (see .env.template) and get the environment variables from Slack App
SLACK_SIGNING_SECRET=
SLACK_BOT_TOKEN=Run
ngrok http 3000
Copy forwarding link to Slack App manifest
display_information:
name: React Slack Demo
features:
bot_user:
display_name: React-Slack-Demo
always_online: false
slash_commands:
- command: /define-word
url: {ngrok_forwarding_link}/api/v1/react-slack/events
description: An application to define words in english
usage_hint: Get definition of a word
should_escape: true
oauth_config:
scopes:
bot:
- chat:write
- chat:write.public
- commands
settings:
interactivity:
is_enabled: true
request_url: {ngrok_forwarding_link}/api/v1/react-slack/events
org_deploy_enabled: false
socket_mode_enabled: false
token_rotation_enabled: false
Launch Program through VSCode debugger
- Building with Bolt for JavaScript
- Implementing a custom react renderer
- react-reconciler package
- Slack events API
- Sophie Alpert's article on infoQ and the related video on how to build a custom renderer