feat: allow configuration of the vite HMR server #28517
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vite allows additional configuration options for the HMR server that let the user set the port, protocol and host etc. of the HMR server. Whilst running a local Angular application with browserstack a websocket error gets thrown when the application and the HMR are being served on the same port `client:529 WebSocket connection to 'ws://localhost:4200/' failed: Unrecognized frame opcode: 5`. This results in the vite client force reloading the page https://github.com/vitejs/vite/blob/eb08f605ddadef99a5d68f55de143e3e47c91618/packages/vite/src/client/client.ts#L106-L108 Configuring HMR server to run on a different port to the main application fixes the issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Vite allows additional configuration options for the HMR server that let the user set the port, protocol and host etc. of the HMR server.
Configuring HMR server to run on a different port to the main application fixes the issue
PR Checklist
Please check to confirm your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Currently it is impossible to configure the vite HMR server as this configuration option is not made available.
There is a bug in vite/browserstack which currently prevents running a local application using browserstack as the page will reload every ~50 seconds due to the websocket connection being lost. For some reason this only occurs when the application and the HMR are being served on the same port, resulting in the following error being thrown
client:529 WebSocket connection to 'ws://localhost:4200/' failed: Unrecognized frame opcode: 5.On receiving this error vite triggers a reload https://github.com/vitejs/vite/blob/eb08f605ddadef99a5d68f55de143e3e47c91618/packages/vite/src/client/client.ts#L106-L108
Issue Number: N/A
What is the new behavior?
It is now possible to configure the hmr configuration in the angular.json making it possible to configure more advanced hmr settings (https://vitejs.dev/config/server-options.html#server-hmr).
A use case of this is that it allows a custom hmr config which bypasses the browserstack error seen above.
Does this PR introduce a breaking change?
Other information