How to use with https://localhost:3000

[djmtype]

I’m using Sage with Local (by Flywheel) with a self-assigned SSL. I’d prefer testing the site in https.

The devURL loads just fine. https://mysite.local

I assume I set the proxyURL to https like "proxyUrl": "https://localhost:3000"?

My browser warns me then I can proceed, but the proxyURL never loads. It’s like stuck there. I tried in 3 different browsers.

In my CLI, I see:

(node:5737) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)

What do I need to do to fix?

[strarsis]

What system is your workstation? Linux; Windows WSL 1/2; OS X?
The nodejs app (BrowserSync) needs network access (and resolution) to the flywheel site (devURL).

[djmtype]

I’m using MacOS Big Sur 11.4

The nodejs app (BrowserSync) needs network access (and resolution) to the flywheel site ( devURL )

How do I do that?

Here’s the full return after yarn start:

❯ yarn start
yarn run v1.22.10
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.


 DONE  Compiled successfully in 1771ms                                                                                    7:29:55 PM

[HTML Injector] Running...
[Browsersync] Proxying: https://sage-gateway.local
[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:3000
    External: https://192.168.1.23:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
(node:6389) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)

[strarsis]

Can you do a wget or curl of the https://mysite.local (devUrl) from within the terminal where you also start the BrowserSync watch from?

In the log you posted the devUrl is https://sage-gateway.local, is it correct?

[djmtype]

Yes, the url is https://sage-gateway.local

❯ curl https://sage-gateway.local
curl: (6) Could not resolve host: sage-gateway.local

[strarsis]

But you can reach that URL https://sage-gateway.local from inside your normal browser on the same system?

[djmtype]

I reset the domain within Local. It took forever to provision. Something must have been stuck even though the WP site url and admin url were correct within the admin.

All good now, but is it not possible to run browsersync with https? BTW, there are no references to insecure assets on the page.

Still getting:

(node:9515) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)

Running curl:

❯ curl https://sage-gateway.local
curl: (60) SSL certificate problem: self signed certificate
More details here: https://curl.haxx.se/docs/sslcerts.html

curl failed to verify the legitimacy of the server and therefore could not
establish a secure connection to it. To learn more about this situation and
how to fix it, please visit the web page mentioned above.

Looks like it’s coming from wepback.config.watch.js.

if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:', 'https:');
}

If I change 0 to 1, the warning goes away, but still doesn’t (re)solve the https issue.

[HTML Injector] Running...
[Browsersync] Proxying: https://sage-gateway.local
[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:3000
    External: https://192.168.1.23:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...


 DONE  Compiled successfully in 513ms

Do I need to add some sort of flag to the yarn start command?

Just to clarify, https://sage-gateway.local/ is running securely while running yarn start, but not https://localhost:3000 is not secure.

[djmtype]

I also tried following this issue to a point because maybe BrowserSync needs to know the location of Local’s self-assigned crt and key?

Self-signed SSL cert w/ browser-sync localhost proxy (Chrome on Windows)

Just a quick update for Sage 9 + Mac OS Sierra based on @brett 's original post: Step 2.1 - Instead of gulpfile.js you need to modify assets/build/webpack.config.watch.js as follows: // snip new BrowserSyncPlugin({ target: config.devUrl, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, //insert this--- advanced: { browserSync: { // https://browsersync.io/docs/options https: { key: config.devSsl.key, …

No go.

[strarsis]

Do you only get that warning when nodejs (BrowserSync) starts up?
Or does opening the site via HTTPS not work at all?

[djmtype]

I get that Node warning in the CLI when BrowserSync starts, with yarn start.

BS will also automatically open the browser window to https://localhost:3000. However, there will be a warning in the browser.

The self-assigned certificate is provided by Internet Widgits Pty Ltd. Regardless if I trust it, the browser still deems it as invalid.

There’s no other errors in the console besides the usual when running yarn start.

[djmtype]

I even trusted the certificate system-wide in my keychain. Safari trusts it. Chrome and Firefox do not; even after browsers have been restarted.

Here’s a comparison of Browsersync – Chrome (left) vs Safari (right).

[djmtype]

Changing 1 back to 0 again, allowed me to view BS settings again, but still https://localhost:3000 is deemed insecure on Chrome and Firefox.

if (url.parse(target).protocol === 'https:') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;

  config.proxyUrl = config.proxyUrl.replace('http:', 'https:');
}

[djmtype]

@strarsis On the grand scheme of things, this isn’t a big deal. BrowserSync still works and watches for changes. I was just more than curious.

[strarsis]

Does this help?

Self-signed SSL cert w/ browser-sync localhost proxy (Chrome on Windows)

In my case (macOS High Sierra, Chrome 66) the cert was still invalid resulting in error message: ERR_CERT_COMMON_NAME_INVALID The solution was to add some extra parameter as described here: https://stackoverflow.com/questions/43665243/invalid-self-signed-ssl-cert-subject-alternative-name-missing After that and adding the cert again to the keychain (and setting the trust right) the SSL cert went green eventually.