REACT client not connecting to server

Application Hosting Questions
1

I have deployed a react client and server connected to a postgres database. The client does not work as expected.

I have used postman to check the the server endpoints are working correctly as well as a client set locally to verify that the external url works.

When running the deployed client I get the ws error upon loading.

WebSocket connection to ‘wss://deployed-todo-app-client-02hy8.kinsta.app:8080/ws’ failed: An SSL error has occurred and a secure connection to the server cannot be made.

I also get the following error when I submit the login form along with a 404 status code

** ERROR**

The string did not match the expected pattern. json@[native code] @React App

This is my 1st deployment and I am out of ideas. Please, can anyone suggest how I can fix this?

4

Hi @maprail! Welcome to the Kinsta community!

Thank you for reaching out to us on the forum. I’m sorry to hear you are having difficulty with the websocket connection on your app. I understand it’s important to resolve this issue as soon as possible.

We have investigated into what could be causing this SSL related error to occur during the websocket request. We have discovered the issue appears to be due to the request attempting to use port 8080. To resolve the issue you may update your application’s code to remove the port section of the URL. Using the URL " wss://deployed-todo-app-client-02hy8.kinsta.app/ws" should work.

Regarding the " The string did not match the expected pattern." error you are seeing, you may first see if correcting the websocket issue resolves this problem as well. If you continue to have difficulty after correcting the websocket issue however, I have found a thread online where another individual was having a similar issue. A possible cause of the issue was also discussed. You may find a link to this thread below:

Please let us know if this information has helped, or if you do need any further assistance. We are always happy to help!

Best regards

5

As far as I am aware the PORT is set by Kinsta and I have no way to override it on my end.

Start script is “start”: “react-scripts start”

I could try something like “start”: “set PORT=‘443’ && react-scripts start”. but per your site you are defining the PORT as 8080 and I believe that would override the startup script. This is my first time. using react and I created the project with ‘create-react-app’ which defines the PORT in the startup script for localhost as 3000

8

Hi @maprail! Thank you for your reply!

I have looked further into this matter to see if it’s possible to change the port used. I have found an internal thread related to create-react-app’, and a member of our development team did share the following code snippet. You can try updating this in the webpack.config.js file located in the client folder:

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 443,
    open: true,
    hot: true,
  },
};

Please let us know if this helps change the port and resolves the issue, or if you need any further assistance. We are standing by and always happy to help!

Best regards

9

I tried all your suggestions and the deployment overrides the port and keeps using 8080.

12

Hello @maprail :wave:

Thank you for your reply and update!

I’ve checked into your GitHub repo(“silverstone-i”) that was setup (and being used) in your Application hosting account (for the deployed-todo-app-client ), and as I checked in your GitHub Repo, there is no such file with that name: webpack.config.js (within the client folder) as mentioned/suggested before by my colleague? :thinking:

What if you try to create a new file named as: webpack.config.js (in the client folder) that will contain these lines:

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 443,
    open: true,
    hot: true,
  },
};

and once saved there, please try to re-deploy the app, and see if there’s any effects/changes for that WSS request to 8080 port?

Best regards,
Agus Utomo

14

apologies. I made the change and re-deployed using the updated main branch. App its still using port 8080

15

Hi @maprail :wave:

I understand that you may have some questions about why your app triggers “wss://deployed-todo-app-client-02hy8.kinsta.app:8080/ws” with port 8080 causing the connection to fail due to SSL error. Although I don’t have any additional information about it, but I can confirm that our app hosting allows WebSocket connections to be established with port 443. You can test this out using a free online WebSockets Server tool by running “wss://deployed-todo-app-client-02hy8.kinsta.app/ws”.

It’s possible that your code is missing something that should tell WebSocket not to use port 8080 as the default port. So, I’ll let anyone in this community who has more experience in building React applications give their input on this matter.

Alternatively, we have a simple React “Hello World” sample script that can serve as a guide for building React applications within our hosting. You can find it at GitHub - kinsta/hello-world-react: An example of how to set your React application up to enable deployment on Kinsta App Hosting services..

I hope you find this information helpful. :slightly_smiling_face:

16

Yeah I’m not going to worry about it, since I will be using vite vs create-react-app moving forward.

FYI: The code was part of a tutorial by Ania Kubow I found on you tube. video or for the code on GitHub. I cloned her repository and followed the instructions she provides towards the end of the video. (A little out of date, but easy to follow).

In her video everything works as expected. Not so for me :face_with_diagonal_mouth: As such, I have to suspect that something changed on the Kinsta site since the video course was created.

You may want to look into that and prove me wrong :blush:

Hope you find this helpful. :grinning: