Twilio has a React app which allows you to quickly get started with their Conversations SDK.
This is an awesome way to get started testing things out, but I wanted to run it through Coder (code-server) on a remote machine where I do most of my testing and development.
Because Coder makes apps accessible via a web proxy, some additional setup was needed to get things working. Read on.
Note: I assume you have already installed all the necessary React tooling (such as yarn).
Configuring the app’s .env file
Link to heading
First, you’ll need to fetch the application from GitHub:
git clone https://github.com/twilio/twilio-webchat-react-app.git
You will then need to make a few changes to get things going. First, you’ll need to look up a (surprisingly large) number of access keys and IDs in the Twilio console, and paste them into the fields at the top of the file. The required fields are:
ACCOUNT_SID=
AUTH_TOKEN=
API_KEY=
API_SECRET=
ADDRESS_SID=
CONVERSATIONS_SERVICE_SID=
Next, you will then need to update the app’s allowed origins and sever URL fields. For instance, if your code-server is at https://code.mysite.com and your React app is running on port 3001, then you would set those fields to:
ALLOWED_ORIGINS=http://localhost:3000,https://code.mysite.com
REACT_APP_SERVER_URL=https://code.mysite.com/proxy/3001
Here’s a completed configuration file (with keys removed, of course):
ACCOUNT_SID=my_sid
AUTH_TOKEN=my_token
API_KEY=my_api_key
API_SECRET=my_api_secret
ADDRESS_SID=my_address_sid
CONVERSATIONS_SERVICE_SID=my_conversations_sid
# ALLOWED_ORIGINS should be a comma-separated list of origins
ALLOWED_ORIGINS=http://localhost:3000,https://code.mysite.com
## base endpoint of your local server. By default it is "http://localhost:3001"
#REACT_APP_SERVER_URL=http://localhost:3001
REACT_APP_SERVER_URL=https://code.mysite.com/proxy/3001
# Used to enable/disable downloading/emailing of chat transcripts for the customer. Enable by setting the variable to true.
DOWNLOAD_TRANSCRIPT_ENABLED=false
EMAIL_TRANSCRIPT_ENABLED=falses
# The environment variable below are optional and should only be filled if enabling email chat transcripts.
SENDGRID_API_KEY=
FROM_EMAIL=
Save your changes.
Starting the server Link to heading
The next step is easy: we start the app’s server component:
yarn server
Start the app Link to heading
Once the server component is running, we start the app. This is slightly more work, as we need to prepend some environment variables to make sure things work properly:
PUBLIC_URL=/absproxy/3000 WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node BROWSER=none yarn start
And that’s it! You should now have the test React app up and running via Coder!
Note that you may need to alter the ports used (3000 and 3001) depending on how many other apps you proxy via coder at the same time. Typically, I test apps one at a time, so my apps always start from 3000 (by default this is the lowest port number code-server uses to proxy stuff).