This application is an implementation of Twilio Client using React.
It is a work in progress, being built on my Twitch stream. Join in and watch the progress or suggest features!
Currently this application can:
Clone the project, change into the directory and install the dependencies.
git clone https://github.com/philnash/react-twilio-phone.git
cd react-twilio-phone
npm install
Copy the .env.example
file to .env
and fill in with your Twilio credentials. You will need:
Environment variable | Description |
---|---|
TWILIO_ACCOUNT_SID | Your Account Sid, found on your Twilio console |
TWILIO_API_KEY | Credentials for the Twilio API, used to sign access tokens. Create your API Key and Secret in the Twilio console |
TWILIO_API_SECRET | Credentials for the Twilio API, used to sign access tokens. Create your API Key and Secret in the Twilio console |
TWILIO_TWIML_APP_SID | You will need to create a TwiML App to set a URL that will be used to direct outbound calls. See the docs on the TwiML app below for how to set this up |
TWILIO_ALLOW_INCOMING_CALLS | If you want to receive incoming calls, set this to "true" |
FROM_NUMBER | The Twilio number you want to use as your caller ID for outbound calls |
If you choose to use ngrok to tunnel from the public to this application you will need to run it with an extra setting. Start ngrok like this:
ngrok http 3000 --host-header localhost:3000
A TwiML App is a container for webhok URLs that can be used for voice and messaging applications. A Twilio Client application requires a TwiML App to tell Twilio where to send a webhook request to when an outbound connection is made. In this application, the webhook request should be a POST
request to /voice
.
When running this application locally you will need to create a tunnel from the public internet to the local web application server, you can do this with ngrok or another service. Set the Voice request URL to https://YOUR_NGROK_SUBDOMAIN.ngrok.io/voice
and the request method to HTTP POST
.
After you have followed the steps above and have your .env
file complete, you can run the application with the command:
npm run dev
You can start the web application server on its own with the command:
npm run server
Run the React application on its own with the command:
npm start
The React application will run on port 3000 and the server port 3001.
MIT © Phil Nash