Make requests between React JS app and Bolt.js (server)

[Billiardist94]

Hello, How can I make request from React app to recieve data from Bolt.js ? I want to display it on browser, like simple chat (send and recieve message from Slack)

What type of issue is this? (place an x in one of the [ ])

• [ ] bug
• [ ] enhancement (feature request)
• [x] question
• [ ] documentation related
• [ ] example code related
• [ ] testing related
• [ ] discussion

Requirements (place an x in each of the [ ])

• [x] I've read and understood the Contributing guidelines and have done my best effort to follow them.
• [x] I've read and agree to the Code of Conduct.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

---

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Reproducible in:

package version: "@slack/bolt": "^3.12.1",

node version: v14.19.1

OS version(s): Windows 10 Home, 21H1, 27.‎12.‎2021, 19043.1889

Steps to reproduce:

1. implement Bolt.js as a separate Node.js process
2. create React.js app
3. try to make request from React app to Bolt.js server

Expected result:

Data that will come as a message to be used for display in React.

Actual result:

Can't make request from React app to Bolt.js server

Attachments:

My app.js file

[seratch]

Hi @Billiardist94, thanks for writing in.

Your Bolt app behaves as either a web endpoint only handles requests from Slack (when using Request URL) or a stand alone WebSocket client app that connects to Slack (when enabling Socket Mode). So, Bolt does not provide ways to directly handle requests from your React front end. In other words, Bolt is a framework to build a Slack app that works inside Slack, not a public web app.

A possible way to implement your app may be to have a datastore to save the message event data that you've received through Bolt's event handlers, plus to build a secure and robust proxy endpoint that handles React requests. Here is a very simple diagram that I am suggesting here:

Slack API servers <-> your Bolt app <-> Datastore <-> Your backend server <-> React

Please note that, if you go with the above approach, your backend server and React front end are responsible to manage message confidentiality (who to access private channel messages, post a message to a channel, and so on). This part can be complex as your app needs to verify a visitor is who in Slack (perhaps, you can use email address to identify the person).

I hope this was helpful to you.

[seratch]

Since we've provided an answer to this question, let us close this issue now. If you have any follow-up questions on it, please feel free to write in!