Content: Issue/Bug/Feature: Hot-reloading not work behind a Proxy URL

[Haeresis]

Version

@nuxt/content: v1.8.1
nuxt: v2.14.15

Steps to reproduce

1. From official Nuxt documentation (https://nuxtjs.org/guide/installation/) I used this command npm init nuxt-app <my-project> (https://github.com/nuxt/create-nuxt-app) I selected the following things:

• Package manager: Npm
• Programming language: JavaScript
• UI framework: Vuetify.js
• Nuxt.js modules: Axios
• Content: Linting tools:
• ESLint: Prettier
• Testing framework: no framework
• Rendering mode: Universal (SSR / Static)
• Deployment target: Server (Node.js hosting)
• Development tools: nothing

1. I have followed the instruction in this video: https://content.nuxtjs.org/fr/#vid%C3%A9os and I hot-reload the content of hello.md provided with a fresh installation.

async asyncData({ $content, params }) {
  const doc = await $content(params.slug || 'hello').fetch()

  return { doc }
},

and

<nuxt-content :document="doc" />

1. We can see by changing content from content/hello.md file the page http://localhost:3000/ is hot reloaded (we have some fetch to hello). We can also see by changing the content of pages/index.vue the page is also hot reloaded.

2. I use an Apache2 configuration to do some Proxyfication of http://localhost:3000/ under https://app.example.develop/ with these instructions:

ProxyPreserveHost on
ServerName app.example.develop

ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

I am now be able to have a hot reloading from https://app.example.develop/ by editing the pages/index.vue but the hotreloading by editing the hello.md file not work.

What is Expected?

Usage of hot reloading is possible from https://app.example.develop/ by editing the content/hello.md file in same way that works by editing pages/index.md.

What is actually happening?

By editing the content/hello.md, no hot reloading (and no fetch to hello) are performed.

We can see from console that run Nuxt with npm run dev the following error

 ERROR  Cannot read property 'toLowerCase' of undefined                                                                                                                                                                                                                                            17:12:08  

  at WebSocketServer.handleUpgrade (node_modules\ws\lib\websocket-server.js:192:27)
  at WS.handleUpgrade (node_modules\@nuxt\content\lib\ws.js:21:21)
  at WS.serve (node_modules\@nuxt\content\lib\ws.js:17:10)
  at node_modules\@nuxt\content\lib\middleware.js:12:15
  at call (node_modules\connect\index.js:239:7)
  at next (node_modules\connect\index.js:183:5)
  at next (node_modules\connect\index.js:161:14)
  at WebpackBundler.middleware (node_modules\@nuxt\webpack\dist\webpack.js:5595:5)

[mathe42]

I think you have to enable websockets when useing a reverse proxy https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/ might help

[Haeresis]

Thank you @mathe42.

I have trying this following instruction in your link and now I tested the following configuration with the same issue.

ServerName app.impaakt.develop
ProxyRequests off

RewriteEngine on
RewriteCond ${HTTP:Upgrade} websocket [NC]
RewriteCond ${HTTP:Connection} upgrade [NC]
RewriteRule .* "wss:/localhost:3000/$1" [P,L]

ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

But I checked my Apache mod, and I do not have the mod_proxy_http_wstunnel. My current Apache version on my dev environment provided with MAMP PRO is 2.2.31 and the following link https://httpd.apache.org/docs/2.4/en/mod/mod_proxy_wstunnel.html indicate it's available since 2.4.5. So maybe it's why that not change the thing. But my apache has emitted no complaint with my configuration.

But, I imagine WS proxy work because I see this from my console when I update pages/index.vue.

What I wondering is why the hot-reload work well with an edition of all other files (as one from /pages for example) if it's a ws issue?

I have also see the following error (I update my first post with it) at the first time I edit the content/hello.md.

 ERROR  Cannot read property 'toLowerCase' of undefined                                                                                                                                                                                                                                            17:40:58  

  at WebSocketServer.handleUpgrade (node_modules\ws\lib\websocket-server.js:192:27)
  at WS.handleUpgrade (node_modules\@nuxt\content\lib\ws.js:24:21)
  at WS.serve (node_modules\@nuxt\content\lib\ws.js:17:10)
  at node_modules\@nuxt\content\lib\middleware.js:12:15
  at call (node_modules\connect\index.js:239:7)
  at next (node_modules\connect\index.js:183:5)
  at next (node_modules\connect\index.js:161:14)
  at WebpackBundler.middleware (node_modules\@nuxt\webpack\dist\webpack.js:5595:5)

[Atinux]

Could you try with the latest version? It should be fixed.