"The development server has disconnected" about django-cra-helper HOT 7 CLOSED

This works excellently! Thanks so much for doing the digging and getting a straightforward answer :)

from django-cra-helper.

Hmm, my initial thought is that Create-React-App has probably switched to Websockets from HTTP, causing Django to try redirecting from ws:// to http:// (hence the unexpected HTTP 301 response).

@cnorthwood Can you confirm which version of react-scripts your project is using? And if possible, can you go into your browser's Dev Tools' Network section and give me a screenshot of the Request and Response panels for that ws:// request?

from django-cra-helper.

I'm using react-scripts 3.4.0 (this is a new project).

Screenshot attrached (the response panel is empty)

from django-cra-helper.

Thanks for linking that, I think your second "'Upgrade' header is missing" error response is the actual problem (which you already knew because you made the trailing slash optional to fix the 301 😛)

I poked around Create-React-App and its packages and I have an idea of what might be happening: it looks like in CRA v3.3 they update the hot reload dev server to use native Websockets instead of the sockjs-client library they were using in v3.2 and earlier. I suspect this is part of what's causing this breakage.

I also noticed that the django-proxy view I'm using to proxy this connection is stripping the Upgrade header when it proxies, which might explain the ultimate error message. This library says it's a "simple HTTP proxy" so perhaps it's no longer suitable for use in proxying ws:// URLs...

Work is nuts so I won't be able to work on this right away, but I'll definitely find time to test it out with CRA v3.4 and find a fix 😄

from django-cra-helper.

Thanks for looking into it :)

from django-cra-helper.

I think I've figured out how to fix this:

1. Create an .env file in the root of your Create-React-App folder with the following environment variable:

WDS_SOCKET_PORT=3000

2. Re-run npm start, then reload your Django view

The CRA liveserver should now connect to ws://localhost:3000 and re-enable live-reloading even from within Django:

https://giant.gfycat.com/CourteousEdibleHyrax.webm
(A screen recording showing live reloading working in Django using [email protected])

This means the following entry in urls.py is no longer required for [email protected] and up:

re_path(r'^sockjs-node/?(?P<path>.*)$', proxy_cra_requests),

@cnorthwood If you can confirm this fixes the problem on your end then I'll just need to update the README accordingly!

from django-cra-helper.

I've addressed this issue with some updates to README.md (see PR #8) highlighting the ability to use the above .env trick with current versions of create-react-app!

from django-cra-helper.