HTTPS setup

[SimeonRolev]

Hi guys, I followed this guide: https://storybook.js.org/addons/msw-storybook-addon. But, in my case I need to have my domain in the URL, so I remapped as such (using Fiddler on windows 10): localhost:6006 lib.domain.net

In my package.json:

"sb": "start-storybook -s public -p 6006"
"https": "start-storybook -s public -p 6006 --https --ssl-key=server/server.key --ssl-cert=server/server.cert"

Running npm run sb:

• Works fine, followed your guide.
• http://localhost:6006/mockServiceWorker.js displays the content of the file.

Running npm run https:

• Works fine and the URL (https://lib.domain.net) is responding properly.
• https://lib.domain.net/mockServiceWorker.js displays the content of the file.
• Getting this error from MSW:

  Failed to register a ServiceWorker for scope ('https://lib.domain.net/') with script ('https://lib.domain.net/mockServiceWorker.js'): An SSL certificate error occurred when fetching the script.

The error is pretty clear - the browser doesn't like my SSL setup and doesn't want to internally request the file. At least this is how I understand it. Do I have to use something like this --unsafely-treat-insecure-origin-as-secure=http://lib.domain.net when running my browser? I wasn't able to do it, tho, didn't work out. Is there a simpler way?

Thanks!

[kettanaito]

Hey, @SimeonRolev.

Based on the error, the browser doesn't trust your certificate. Modern browsers would block untrusted certificates, which includes self-signed certificates you may use for local development on HTTPS.

To develop against a self-signed certificate, you need to configure your browser to trust it. There are a few ways to do so, please search for the most suitable option based on your setup and browser, you'll find a solution. Some of the options I've tried in the past included adding the certificate to Keychain (if on MacOS), or setting the chrome://flags/#allow-insecure-localhost flag in Chrome to true.