Closed Sunilg1234 closed 2 years ago
I think your first issue is that you need to run the project with npm run dev
.
The ngrok link will be different every time you restart ngrok, unless your pay for an account and can use a subdomain of your choice. Otherwise start ngrok then use the URL that's shown, plus /voice
(like in your question).
Thank you so much for getting back to me. I am beginner to all this, so I am having hard time.
So, in both incoming and outgoing in twilio, I right ngrok link + /voice?
To use the react app daily through this, I have to npm run dev, then operate ngrok, put the link and I am good to go?
Ah, my mistake, incoming should be /voice/incoming
.
You could always run the app like that, or you could deploy it somewhere and have it always run. I'll admit, I doubt I included good instructions to deploy, but you might be able to figure it out.
Still the same error :(
undefined:3
return typeof s === "string" ? %FlattenString(s) : s
^
SyntaxError: Unexpected token '%'
at actualWrite (C:\Users\maina\react-twilio-phone\node_modules\sonic-boom\index.js:192:3)
at SonicBoom.write (C:\Users\maina\react-twilio-phone\node_modules\sonic-boom\index.js:101:5)
at Pino.write (C:\Users\maina\react-twilio-phone\node_modules\pino\lib\proto.js:98:43)
at Pino.LOG [as info] (C:\Users\maina\react-twilio-phone\node_modules\pino\lib\tools.js:39:21)
at ServerResponse.onResFinished (C:\Users\maina\react-twilio-phone\node_modules\pino-http\logger.js:47:18)
at ServerResponse.emit (node:events:402:35)
at onFinish (node:_http_outgoing:830:10)
at callback (node:internal/streams/writable:552:21)
at afterWrite (node:internal/streams/writable:497:5)
at afterWriteTick (node:internal/streams/writable:484:10)
Proxy error: Could not proxy request /voice/token?identity=phil from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
In ngrok
GET /voice/token 500 Internal Server Error
How are you running the application?
At first I cloned your repo copied .env.example file, deleted it, then I created new .env file in home directory with my details ran ngrok code npm run dev wrote ngrok link in both incoming and outgoing
then in my browser I went to ngrok link/voice
everything works fine, but when I click connect I get above errors.
That error means that the server side is not running for some reason. Can you run npm run server
alone and see if the server is able to start or if you get another error?
Yes it shows the same error when I try to go to http://localhost:3001/ after I enter npm run server
Also, In twilio, both incoming and outgoing is http POST?
The error you were seeing before was React saying that it could not proxy to localhost:3001. You should not be seeing that same error when you only run the server because the React application is not running.
Can you run npm run server
and then try to visit http://localhost:3001/voice/token in the browser. If you get an error please tell me what the error is also check the terminal where you ran the server and let me know if there is an error there too, and if so, what the error says.
Also, In twilio, both incoming and outgoing is http POST?
Yes, you can see the server endpoints here and that they are post requests: https://github.com/philnash/react-twilio-phone/blob/master/server/index.js#L66-L81
Thank you. I visited http://localhost:3001/voice/token after I ran npm run server
,It gave me the token and no errors
Ok, the server works.
So now if you run both npm run server
and npm start
that will start the client and the server separately.
If you do that, does the application work?
Still the same error. Also after I tried the server second time, it showed the error.
do you recommend doing npm audit fix
or npm audit fix --force
Were there any errors in the terminal?
yes in npm run server
:
undefined:3
return typeof s === "string" ? %FlattenString(s) : s
^
SyntaxError: Unexpected token '%'
at actualWrite (C:\Users\maina\Desktop\react-twilio-phone\node_modules\sonic-boom\index.js:192:3)
at SonicBoom.write (C:\Users\maina\Desktop\react-twilio-phone\node_modules\sonic-boom\index.js:101:5)
at Pino.write (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino\lib\proto.js:98:43)
at Pino.LOG [as info] (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino\lib\tools.js:39:21)
at ServerResponse.onResFinished (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino-http\logger.js:47:18)
at ServerResponse.emit (node:events:402:35)
at onFinish (node:_http_outgoing:830:10)
at callback (node:internal/streams/writable:552:21)
at afterWrite (node:internal/streams/writable:497:5)
at afterWriteTick (node:internal/streams/writable:484:10)
[nodemon] app crashed - waiting for file changes before starting...
In npm start
:
Proxy error: Could not proxy request /voice/token?identity=phil from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
It looks as though you are having trouble with pino, the logger.
If you remove or comment out the line in server/index.js
that uses pino
and try again, what happens?
Thank you now it works!
In console I got this error:
Likewise, I am confused in your guide. What url do I write in twilio incoming calls? Also the ngrok link will be different everytime I connect right? So, in outgoing call of twilio app i write: http://ff90-202-51-88-209.ngrok.io/voice ?