code-server icon indicating copy to clipboard operation
code-server copied to clipboard

Published 20 hours ago • verified publisher icon coder

[Bug]: Getting white screen error in react app when port forward

Open Vaibhav1919 opened this issue 1 year ago • 3 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

OS/Web Information

  • Web Browser: Chrome
  • Local OS: Ubuntu
  • Remote OS: Ubuntu
  • Remote Architecture: amd64
  • code-server --version: 4.12.0

Steps to Reproduce

  1. Deploy code-server as pod and create service in EKS cluster
  2. Use Emissary-ingress as proxy and create mapping to code-server userpod (eg /tempmap/ --> userpod service)
  3. Access the userpod at the URL www.domain.tld/tempmap/
  4. Install Nvm , npm and create-react-app
  5. switch to the created directory and do npm start and access the browser
  6. Now we will get white screen error
  7. Follow the code-server proxy guidelines
  8. try PUBLIC_URL=/absproxy/3000
    WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node
    BROWSER=none npm start
  9. Still white screen error and 404 errors on chrome's developer console
  10. Now try following
  11. PUBLIC_URL=/tempmap/absproxy/3000
    WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node
    BROWSER=none npm start
  12. After this we don't get 404 errors on chrome's developer console but all files are pointing to index.html

Expected

React app should work correctly

Actual

Getting White screen error in react-app Case-1 When using /proxy/3000 picturefirst Case-2 When using /absproxy/300 a) PUBLIC_URL=/absproxy/3000
WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node
BROWSER=none npm start picture-2 b) PUBLIC_URL=/mapping/absproxy/3000
WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node
BROWSER=none npm start picture-3

Logs

No response

Screenshot/Video

No response

Does this issue happen in VS Code or GitHub Codespaces?

  • [X] I cannot reproduce this in VS Code.
  • [X] I cannot reproduce this in GitHub Codespaces.

Are you accessing code-server over HTTPS?

  • [X] I am using HTTPS.

Notes

Code-server is deployed on AWS EKS cluster, and I am using emissary-ingress as proxy to access code-server. SSL is attached to AWS application load balancer used to access code-server. We are getting this error not always but getting them randomly. picturelast

Vaibhav1919 avatar May 10 '23 12:05 Vaibhav1919

I'm having the same problem when attempting to develop a react app on my code server which is deployed to an OVH VPS for reference.

cobaltgit avatar Sep 16 '23 16:09 cobaltgit

@Vaibhav1919 May I ask where to modify PUBLIC_ URl

Gitmpb avatar Oct 12 '23 08:10 Gitmpb

It looks like an environment variable, so you could do something like export PUBLIC_URL=<my url> before running npm start.

code-asher avatar Oct 13 '23 20:10 code-asher

Closing as stale but feel free to comment if you come back to this.

code-asher avatar Jul 12 '24 23:07 code-asher

I am having the same issue as this any suggestions ??

15m43lk4155y avatar Jul 14 '24 23:07 15m43lk4155y

The reason for this is usually because the React application is not set up to work with a base path (/absproxy/3000 for example).

The fix is to make it work with a base path, or to make it relative, but you might have to talk to the create-react-app folks for how exactly to do that. I think there might be some other issues or discussions here where some people posted their solutions though.

code-asher avatar Jul 15 '24 21:07 code-asher

Another fix is to use the subdomain proxy instead of the path-based one.

code-asher avatar Jul 15 '24 21:07 code-asher