From f0cf47614d23516816757c12d9c56418553d7e2a Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Fri, 14 Jan 2022 12:55:47 -0700 Subject: [PATCH 1/3] docs: add vite-hmr guide --- guides/troubleshooting/vite-hmr.md | 27 +++++++++++++++++++++++++++ manifest.json | 3 +++ 2 files changed, 30 insertions(+) create mode 100644 guides/troubleshooting/vite-hmr.md diff --git a/guides/troubleshooting/vite-hmr.md b/guides/troubleshooting/vite-hmr.md new file mode 100644 index 000000000..44a4b9347 --- /dev/null +++ b/guides/troubleshooting/vite-hmr.md @@ -0,0 +1,27 @@ +--- +title: Vite & HMR +description: Learn how to resolve issues Vite and hot-module-reloading (HMR). +--- + +When using Vite and accessing your app via Dev URLs, you may encounter issues +with hot-module-reloading (HMR) not working. + +## Why this happens + +Vite runs a WebSocket for HMR and assumes the client will listen on a specific +port. This leads and Vite HMR and the client never connecting. + +## How to fix + +Edit your `vite.config.js` file and add the following: + +```js + server: { + hmr: { + clientPort: 443 + }, + }, +``` + +If this doesn't resolve the issue, please +[contact us](https://coder.com/contact) for further support. diff --git a/manifest.json b/manifest.json index 5961bfb28..dc17475aa 100644 --- a/manifest.json +++ b/manifest.json @@ -502,6 +502,9 @@ }, { "path": "./guides/troubleshooting/502error.md" + }, + { + "path": "./guides/troubleshooting/vite-hmr.md" } ] } From d89f50ba32bd1c4a2e7021c650ee601637b5bff6 Mon Sep 17 00:00:00 2001 From: Katie Horne Date: Fri, 14 Jan 2022 15:32:50 -0600 Subject: [PATCH 2/3] edit text --- guides/troubleshooting/vite-hmr.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/guides/troubleshooting/vite-hmr.md b/guides/troubleshooting/vite-hmr.md index 44a4b9347..bef2c879e 100644 --- a/guides/troubleshooting/vite-hmr.md +++ b/guides/troubleshooting/vite-hmr.md @@ -1,19 +1,23 @@ --- -title: Vite & HMR -description: Learn how to resolve issues Vite and hot-module-reloading (HMR). +title: Vite and HMR +description: Learn how to resolve issues with hot module reloading (HMR) when +using Vite. --- -When using Vite and accessing your app via Dev URLs, you may encounter issues -with hot-module-reloading (HMR) not working. +When using Vite and accessing your app via +[dev URLs](../../workspaces/devurls.md), you may encounter issues with hot +module reloading (HMR) not working. ## Why this happens -Vite runs a WebSocket for HMR and assumes the client will listen on a specific -port. This leads and Vite HMR and the client never connecting. +Vite runs a WebSocket for hot module reloading (HMR) and assumes the client will +listen on a specific port. If this isn't the case, Vite HMR and the client never +connect. ## How to fix -Edit your `vite.config.js` file and add the following: +Edit your `vite.config.js` file and add the following information to provide the +appropriate port number: ```js server: { From 6e5386533a7d1535b5c12e12c4eced4527212cdb Mon Sep 17 00:00:00 2001 From: Katie Horne Date: Tue, 18 Jan 2022 08:04:49 -0600 Subject: [PATCH 3/3] fix metadata --- guides/troubleshooting/vite-hmr.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/guides/troubleshooting/vite-hmr.md b/guides/troubleshooting/vite-hmr.md index bef2c879e..7e86d2679 100644 --- a/guides/troubleshooting/vite-hmr.md +++ b/guides/troubleshooting/vite-hmr.md @@ -1,7 +1,6 @@ --- title: Vite and HMR -description: Learn how to resolve issues with hot module reloading (HMR) when -using Vite. +description: Learn how to resolve issues with HMR when using Vite. --- When using Vite and accessing your app via