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

sage
6

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,
            cert: config.devSsl.crt
          },
        }
      }
    // ---end insert
    }),

Step 3.1 - Insert the devSsl config settings as the last item in the JSON set:

// snip
  "browsers": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],
 // ---insert:
  "devSsl": {
    "key": "/home/foobar/ssl-certs/server.key", 
    "crt": "/home/foobar/ssl-certs/server.crt"
  }
}

Absolute paths must be used in the devSsl settings. If you’re storing your keys in your home folder like I am, you may want to grant www-data group permissions to the folder, and 0660 write permissions to the files in that folder, just to be on the safe side.

Step 4-6
For MacOS Sierra + Chrome 56 I had to take a slightly different approach.

  • There are two ways you can get your certificate file to import into your keychain:
  1. Download the .crt file you generated earlier on, from your server to your desktop
  2. Go to Developer Panel (Cmd-Shift-I) > Security tab > View Certificate > point your cursor on the large icon representing the certificate and drag it to your desktop (effectively copying the cert file).
  • Double click on the .crt file and Keychain Access will open, asking you to import it
  • When imported, double click on the cert file in Keychain Access, and in the dropdown “When using this certificate” select “Always trust”, type your system password in and close Keychain Access.
  • Restart Chrome: chrome://restart and restart your watch task: yarn run start
  • It may take a couple of Chrome reboots / yarn reboots to get the certificate accepted but it’ll happen eventually.
1 Like