alternative to binding a new port

[pcnate]

it would be great if the reloadjs socket could be made available through the existing express app rather than having a connection to another domain:port combination. This can be helpful when the development system is behind a proxy_pass webserver so all requests can be made through a single proxy_pass definition in nginx

I've looked through the configuration (several times now) looking for such a thing. hostname didn't seem to work.

All I want is for reload to inject a new path into express that does not live on a new port when running the following example code:

let express = require('express')
let app = express();
let server = http.Server( app );
let output = reload( app, { path: '/reload/ws' } );

app.get( '/', ( request, response ) => {
  response.send( 'Hello World!' )
} );

server.listen( port, '127.0.0.1', async () => {
  let address = server.address();
  console.log( `Example app via ${ address?.family } at http://${ address?.address }:${ address?.port }` )
} );

On page load the socket would connect to wss://dev.example.com/reload/ws

my current dev system lives in an environment configured as follows:

• debian linux cloud hosted vm
• nginx service as proxy_pass server, config below
• angular web server, which has it's own mechanism for detecting and auto reloading when frontend sources change
• developing remotely using Remote Development extension for VS Code

NodeJS hijack

app.get( '/reload/reload-custom.js', async ( request, response ) => {
  // get reloadjs contents
  let contents = await readFile( path.join( process.cwd(), 'node_modules', 'reload', 'lib', 'reload-client.js' ) );

  // replace socketUrl path
  contents2 = contents.toString().split( os.EOL );

  for( let line in contents2 ) {
    if( contents2[line] === '  var verboseLogging = false' ) {
      contents2[line] = '  var verboseLogging = false';
    }
    if( contents2[line] === '  socketUrl = socketUrl.replace() // This is dynamically populated by the reload.js file before it is sent to the browser' ) {
      contents2[line] = '  socketUrl = `ws${ window.location.protocol === "https:" ? "s" : "" }://${ window.location.hostname }/reload/wss` // this is dynamically populated by host'
    }
  }

  let contents3 = contents2.join( os.EOL );

  // send contents
  response.contentType = 'text/javascript; charset=utf-8';
  response.send( contents3 );
});

NGINX config

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream angular {
        server localhost:4200;
}

upstream nodejs {
        server localhost:3000;
}

upstream reloadjs {
        server localhost:8000;
}

server {

    root /var/www/app_root/dist/webapp/;
    index index.html index.htm index.nginx-debian.html;
    server_name dev.example.com;

    location / {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://angular/;
        proxy_redirect http://angular/ https://$server_name/;
    }

    location /reload/ {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://nodejs/reload/;
        proxy_redirect http://nodejs/reload/ https://$server_name/reload/;
    }

    location /api/ {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://nodejs/api/;
        proxy_redirect http://nodejs/api/ https://$server_name/api/;
    }

    # was attempting to hijact the socketUrl of reload to point here but it randomly reloads
    location /reload/wss {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://reloadjs/;
        proxy_redirect http://reloadjs/ https://$server_name/reload/wss;
    }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dev.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dev.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = dev.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;

    server_name dev.example.com;
    return 404; # managed by Certbot
}

[kethinov]

This will let you do that: https://github.com/rooseveltframework/express-browser-reload