react-express-starter Internal Server error

Hi there!

Tried the solution, am not able to get chat token using name, getting internal server 500 this api /chat/token.

Thanks

Oct 08 '20 14:10 rajkumar73443

Hi there! Can you explain a bit more about what you did and what error you are getting? If you are trying to use the token endpoints, did you checkout the twilio branch? Can you post the full error message you get? Have you changed anything about the project?

Oct 08 '20 22:10 philnash

http://localhost:3000/chat/token. Failed to load resource: the server responded with a status of 500 (Internal Server Error).

Oct 09 '20 12:10 rajkumar73443

Did you check out the twilio branch? Have you changed anything about the project? Did you follow the instructions to get things started in the README? Have you filled in the .env file with your Twilio credentials?

Oct 09 '20 12:10 philnash

I have checked out this https://github.com/philnash/react-express-starter. Have you changed anything about the project:-NO, Did you follow the instructions to get things started in the README: Yes, Have you filled in the .env file with your Twilio credentials:Yes

Oct 09 '20 12:10 rajkumar73443

Are you using the twilio branch?

Is there an error in the terminal where you started the app?

Oct 09 '20 13:10 philnash

Are you using the twilio branch:Yes Is there an error in the terminal where you started the app:No

Oct 09 '20 14:10 rajkumar73443

How are you running the application? Is it with npm run dev?

How are you fetching /chat/token?

Oct 10 '20 03:10 philnash

How are you running the application? Is it with npm run dev? yes How are you fetching /chat/token?http://localhost:3000/chat/token.

Oct 12 '20 07:10 rajkumar73443

Here's what I have done and the result I get:

Clone the repo and checkout the twilio branch:

git clone https://github.com/philnash/react-express-starter.git -b twilio

Change into the new directory and install the dependencies

cd react-express-starter
npm install

Copy the .env.example file to .env

cp .env.example .env

Enter values for TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET and TWILIO_CHAT_SERVICE_SID in .env.

Start the application:

npm run dev

Open localhost:3000 and you will find the React application running. In fact, if you open http://localhost:3000/chat/token you will also see the React application, because on port 3000 React takes over all the routes.

You can try to load http://localhost:3001/chat/token (the server is running on port 3001 and being proxied to by the webpack dev server). When I do, after following the above steps, I receive a JSON response with an access token.

You can also load up localhost:3000 and open dev tools and make a request to/chat/token like this:

fetch("/chat/token", { headers: { "Content-Type": "application/json" }})
  .then(res => res.json)
  .then(console.log)

I did so and found the token was logged to the console.

Please try again, following the above steps. If you still get a 500 error, please send me a screenshot of the error in the browser and a screenshot of the terminal where the application was started.

Thanks.

Oct 12 '20 11:10 philnash

But I got some after do this thing.

Oct 12 '20 15:10 rajkumar73443

Can you send a screenshot of the terminal where you ran npm run dev after you get this error, please.

Oct 12 '20 19:10 philnash

Hello, can you see this screen shot

Oct 13 '20 05:10 rajkumar73443

Thanks @rajkumar73443, we're getting somewhere! That shows that the webpack dev server is having trouble proxying the request.

Can you make a request directly to localhost:3001/chat/token and show the terminal like that last screenshot?

Oct 13 '20 05:10 philnash

Oct 13 '20 05:10 rajkumar73443

It looks like you're running the react application on port 3001 there. When you start the application with npm run dev it actually runs the React application on port 3000 and then a back end server on port 3001.

Here's a different idea, can you run npm run server. That should just start the back end token server. We don't need the react application to test this issue right now.

Then try to load localhost:3001/chat/token in a browser and show me the same screenshots as above.

Oct 13 '20 05:10 philnash

Also, the error is suggesting that perhaps the back-end server isn't even running. Are you using npm start to start the application?

Oct 13 '20 05:10 philnash

Oct 13 '20 06:10 rajkumar73443

do I need backend code for this project

Oct 13 '20 06:10 rajkumar73443

The access token must be created by a back-end. This project is a combination of a front-end built with React and a back-end built with Express. To successfully use this project you must run the front and back-end at the same time.

In your last screenshots it appears that you were only running the React application.

Please run just the back-end by running npm run server and make a request to http://localhost:3001/chat/token and then show me the screenshots of the application and the terminal.

Oct 13 '20 07:10 philnash

Hey @rajkumar73443, did you get any further with this? Or can I close this issue?

Oct 20 '20 21:10 philnash

I Have tried all the solution which you have given. but still issue is not resolved.

Oct 23 '20 07:10 rajkumar73443

Hi @rajkumar73443, I'm trying to find out what is going on, but you stopped answering.

Can you run the back-end by running npm run server and make a request to http://localhost:3001:chat/token and then show me a screenshot of the terminal and the result of making the request.

Oct 24 '20 00:10 philnash

+1.

When I am trying to run npm run server it defaults to port 3001. Not sure why. Though the issue persists for me as it is.

Jul 28 '21 11:07 fatinWasta

@fatinWasta npm run server is supposed to run the server on port 3001. npm start starts the client side application serving it on port 3000. npm run dev then runs both of them together and the proxy line in the package.json means that requests from the client are proxied through to the server on port 3001.

What issue are you having?

Jul 29 '21 23:07 philnash