Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use same port as the dev server for HMR #2275

Closed
etamponi opened this issue Nov 11, 2018 · 11 comments
Closed

Use same port as the dev server for HMR #2275

etamponi opened this issue Nov 11, 2018 · 11 comments
Labels
HMR Hot Module Reloading 🙋‍♀️ Feature

Comments

@etamponi
Copy link

etamponi commented Nov 11, 2018

🙋 feature request

Serve the HMR websocket on the same port that the development server uses.

🤔 Expected Behavior

There should be no need to use two distinct ports (at least from an end-user prospective). It would be great to have at least a option to enable the use of the same port for both the dev server and HMR:

parcel --proxy-hmr src/index.html

which will serve the HMR websocket on port 1234 (or on any port specified by --port)

😯 Current Behavior

Right now, the HMR websocket server listens on a different port and there is no way to use the same port as the development server.

💁 Possible Solution

Either by default or under an option like --proxy-hmr, websocket connections get proxied by the development server to the HMR server, allowing the client side to use the same port as the develpopment server to get HMR.

I'll try to create a PR 🤞

🔦 Context

Right now, the HMR websocket server listens on a different port, which means that services like Glitch (https://glitch.com, I am one of the core developers) cannot use Parcel's HMR. We are going to deploy a change that will enable us to use parcel watch (we used to use safe-write, so it didn't work), but it would be awesome if we could also use the parcel development server with HMR!!!

Example:

This Glitch project: https://glitch.com/edit/#!/parcel uses an hack and a proxy to get the HMR running on the same port. It works great!

@devongovett devongovett added the HMR Hot Module Reloading label Apr 8, 2019
@benduran
Copy link

benduran commented Nov 6, 2019

Was just about to submit this as a new feature, but I see this is still open. Any word from the development team about this?

It would be great if we could opt-in to using the same port and host for both the HMR / Live Reload server and the static server. This is especially useful in enterprise software applications that require mocking an SSO provider during local development. Typically, these mocks are Docker containers or small CLI tools that act as a reverse proxy and aid in providing user identity during local development, and are typically less configurable that the build tools we UI / Front-end engineers are using.

@benduran
Copy link

benduran commented Nov 6, 2019

There are easy-ish ways to address this, thanks to Parcel's easy-to-use Node API. However, it would be fantastic if it was provided out-of-the-box for a truly drop-in bundler.

@benduran
Copy link

@DeMoorJasper and @devongovett I hate to be a bother, but just wanted to bring this more to your attention. I'm trying to get more devs on board to use Parcel at my company, and while we have a partial workaround for this, it would be nice to reduce local dev code to not need browser-sync to support live reloading.

If this is planned for Parcel 2, please let me know so I can relay the message. I'd be more than happy to help out, as well, if it's a resourcing issue. Thanks!

@devongovett
Copy link
Member

What’s the reasoning for needing the same port? Just to avoid opening multiple ports in docker or something else?

In Parcel 2 this might actually be more difficult because the dev server and hmr server are in separate plugins that don’t know about each other...

@benduran
Copy link

Thanks for getting back to me! The reasoning for allowing the same port is because many developers at my company use a local CLI utility that mimics our Single Sign-On auth procedure, which is super useful for validating that our apps are reading user identities properly. However, this utility acts as a proxy and only supports HTTPS. Since Parcel's WebSocket connection logic currently relies on sniffing the window.location.protocol and window.location.host for determining how to connect to its WS connection, this makes the WS client assume that our SSO proxy is also hosting the HMR server on a different port (which it isn't).

I could see there being two actual solutions for this:

  1. Allow user-configurable WS protocol, host and port for the HMR server
    or
  2. Allow the HMR server to share the same port as the static server, perhaps on a different URL path

This would allow us to successfully use Parcel out-of-the-box without needing to rely on browser-sync to make this work. Let me know your thoughts, thanks!

@devongovett
Copy link
Member

devongovett commented Nov 17, 2019

Oh I see. Have you tried the --hmr-port and --hmr-port CLI options?

@benduran
Copy link

Great question. I have! After doing some more noodling around, let me revise what I think would work:

Since our local development proxies are providing their own HTTPS connections, they expect the connections they're making to our development servers to usually be over HTTP. However, since the HMR Parcel server uses window.location.protocol (as seen here), this can break the HMR server connection.

Would it be possible to allow for having the Static Bundle server listen over either HTTP or HTTPS, and allow the HMR server to listen over HTTP or HTTPS, where maybe the Static Bundle server is listening over HTTP and the HMR server is HTTPS and provides its own (or user generated) SSL certs? I think this would solve the problem.

Let me know if that isn't clear. Thanks!

@devongovett
Copy link
Member

I see. So a separate —hmr-https option would work then?

@benduran
Copy link

benduran commented Nov 18, 2019 via email

@endafarrell
Copy link

+1 for a --hmr-https option - it would make my particular setup easier (nginx is infront, reverse proxying both an API and a parcel-bundled static site, but special locations for large media files coming from elsewhere) too. Right now I just reload the page rather than getting the value of the HMR.

@devongovett
Copy link
Member

HMR and the dev server have run on the same port by default since parcel v2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
HMR Hot Module Reloading 🙋‍♀️ Feature
Projects
None yet
Development

No branches or pull requests

6 participants
@devongovett @etamponi @endafarrell @DeMoorJasper @benduran and others