problems with dev server using https - not using specified certs, and vite wss:// failing

[thuna-garry]

Two (related?) problems:

1 Need to have 'quasar dev' running in https mode with vite to use specific certs (which are trusted on my dev machine)

I attempted to follow the instructions in the docs but only found example/explanation for CLI/webpack and nothing for CLI/vite.

CLI/webpack doc page shows

// quasar.config file

devServer: {
  server: {
    type: 'https', // NECESSARY (alternative is type 'http')

    options: {
      // Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
      key: "/path/to/server.key",
      pfx: "/path/to/server.pfx",
      cert: "/path/to/server.crt",
      ca: "/path/to/ca.pem",
      passphrase: 'webpack-dev-server' // do you need it?
    }
  }
}

so I tried

// excerpt from my quasar.config file
    devServer: {
      https: true,
      open: false, // opens browser window automatically
      strictPort: true,
      port: ctx.mode.spa ? 8071 : (ctx.mode.pwa ? 9000 : 9090),
      server: {
        type: 'https'
        options: {
          // Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
          key:  'c:/devJavascript/mydomain/certs/_wildcard.local.mydomain.com-key.pem',
          cert: 'c:/devJavascript/mydomain/certs/_wildcard.local.mydomain.com.pem',
        }
      },
    },

If I omit the 'https: true' (as in the CLI/webpack example) then the dev server doesn't listen with https.
I don't think that QuasarCLI is even interpreting the 'server' block as I can put bogus paths in for the 'key' and 'cert' without getting any errors.
If I check the cert in chrome (after accepting the security warnings) it reports

Common Name (CN) example.org
Organization (O) Test
Organizational Unit (OU) Test
Common Name (CN) example.org
Organization (O) Test
Organizational Unit (OU) Test
Issued On Monday, July 3, 2023 at 2:29:44 PM
Expires On Wednesday, August 2, 2023 at 2:29:44 PM
...

... so it appears that the QuasarCLI is (has) generated a 'dummy' cert, which is expected if it isn't understanding that there is a specific cert to use.
I know that the cert I've generated is good. It was generated using mkCert (again as suggested in CLI/webpack) and when I use this same cert for the backend (which is express) the browser has no issue whatsoever (note that I've locally aliased app.local.mydomain.com back to localhost/127.0.0.1).

How do I properly instruct QuasarCLI to use my specific cert?

2. On refresh or HMR vite fails

Initial page load works (after accepting browser warning about cert), but any HMR or manual refresh sends the app into a loop that logs

WebSocket connection to 'wss://app.local.mydomain.com:8071/' failed:
(anonymous) @ colorpick.user.js:188
[vite] server connection lost. polling for restart...
Navigated to https://app.local.mydomain.com:8071/timeClock3
[vite] connecting...

at infinitum.

I'm assuming this too has something to do with the dev server being https and/or the cert is invalid.
Since HMR nor a manual page reload works, the only way to see changes is to stop and restart the dev server -- very painful (even with vite).

Any assistance, RTFM etc., greatly appreciated.

Environment details

yarn dlx @quasar/cli info

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 18.16.0

Global packages
NPM - 9.5.1
yarn - 3.5.0
@quasar/cli - 2.2.1
@quasar/icongenie - Not installed
cordova - Not installed

Important local packages
quasar - 2.12.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.4.3 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.4 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.2.2
pinia - 2.1.4 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 2.9.16 -- Native-ESM powered web dev build tool
eslint - 8.44.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed

Quasar App Extensions
None installed

[pdanpdan]

The section for vite is https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker#ssl-certificate

[thuna-garry]

Fixed. All issues gone. Thanks so much, I now have a useful dev environment back!

[operez2000]

Hi, how can I make quasar build -m ssr run with SSL? I achieved only with quasar dev -m ssr based on the (https://quasar.dev/quasar-cli-vite/developing-pwa/handling-service-worker#ssl-certificate) and (https://quasar.dev/quasar-cli-webpack/quasar-config-file#property-devserver) documentation
Thanks in advance

[rstoenescu]

Usually you'll be using a webserver (nginx/apache/etc) which redirects an external port to the SSR app's local port. So you can configure that with SSL.