Skip to content

Commit

Permalink
README.md: Document Angular 11+ usage
Browse files Browse the repository at this point in the history
Angular 11+ offers to run ng serve with the --hmr flag. I'm using it as of today and maybe others are interested, too.

(thanks to jverhoelen, #15)
  • Loading branch information
Svish committed May 20, 2021
1 parent 776a9b0 commit 63b3893
Showing 1 changed file with 7 additions and 5 deletions.
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ npm install --save-dev cypress-hmr-restarter
```js
// E.g. in cypress/support/index.js

// For webpack HMR (used in e.g. create-react-app)
// For webpack HMR (used in e.g. create-react-app or angular 11+)
import 'cypress-hmr-restarter';

// For webpack-hot-middleware (used in e.g. gatsby)
Expand All @@ -38,9 +38,10 @@ import 'cypress-hmr-restarter/gatsby';

```jsonc
{
// Overrides assuming URL via baseUrl
"hmrUrl": "ws://localhost:3000/sockjs-node", // default import
"hmrUrl": "http://localhost:3000/__webpack_hmr", // gatsby import
// Overriding then URL used to connect, otherwise created from the baseUrl
"hmrUrl": "ws://localhost:3000/sockjs-node", // Default import
"hmrUrl": "ws://localhost:3000/websocket", // Angular 11+ import
"hmrUrl": "http://localhost:3000/__webpack_hmr", // Gatsby import

// Overrides delay between event and restart (ms)
"hmrRestartDelay": 1500
Expand All @@ -52,6 +53,7 @@ import 'cypress-hmr-restarter/gatsby';
When using the [Cypress Test Runner](https://docs.cypress.io/guides/core-concepts/test-runner.html) (`cypress open`), after the window has loaded, it will try to connect and listen for events. When an event signifying a change has happened, it will first try clicking the stop button, and then, after a short delay, it will click the restart button.

- The default import connects to the [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server) websocket at either `<hmrUrl>` or `ws://<baseUrl>/sockjs-node` (`wss:` if `https:`), and listens for messages with the type `invalid`.
**IMPORTANT:** You need to ensure that [`transportMode`](https://webpack.js.org/configuration/dev-server/#devservertransportmode) option of `webpack-dev-server` is set to `ws` for the feature to work.

**IMPORTANT:** You need to ensure that [`transportMode`](https://webpack.js.org/configuration/dev-server/#devservertransportmode) option of `webpack-dev-server` is set to `ws` for the feature to work.

- The gatsby import connects to the [`webpack-hot-middleware`](https://www.npmjs.com/package/webpack-hot-middleware) event source at either `<hmrUrl>` or `<baseUrl>/__webpack_hmr`, and listens for messages with the action `built`.

0 comments on commit 63b3893

Please sign in to comment.