Merge pull request #319 from iansvo/issue-290

Add documentation for websockets certificate errors

packages/toolkit/README.md

@@ -257,6 +257,31 @@ Replace `TENUP_THEME_DIST_URL` and `TENUP_THEME_DIST_PATH` with the path to the
 
 Make sure to reload the page after running 10up-toolkit as the `dist/fast-refresh.php` file is generated by 10up-toolkit
 
+### HTTPS and Certificates
+
+In some setups (such as Laravel Valet), Websocket SSL connections will fail unless you explicitly tell webpack what cert files to use (see issue [290](https://github.com/10up/10up-toolkit/issues/290)).
+
+If you aren't already customizing webpack in your project, create a new `webpack.config.js` file in the root of your project/theme. You need to specify the cert, key, and ca properties for the config.devServer.https object.
+
+```
+const config = require('10up-toolkit/config/webpack.config.js');
+const fs = require('fs')
+
+// Customize this to the appropriate path to your certificate folder
+const certPath = '/Users/youruser/.config/valet'
+
+// Check if devServer is in use and if so, modify the cert files used
+if( typeof config.devServer === 'object ) {
+  config.devServer.https = {
+    key: fs.readFileSync(`${certPath}/Certificates/yoursite.test.key`),
+    cert: fs.readFileSync(`${certPath}/Certificates/yoursite.test.crt`),
+    ca: fs.readFileSync(`${certPath}/CA/LaravelValetCASelfSigned.pem`),
+  }
+}
+
+module.exports = config;
+```
+
 ### Troubleshooting
 
 If HMR/Fast Refresh is not working for you these steps can help you debug the problem:
@@ -282,6 +307,7 @@ module.exports = (api) => {
   };
 };
 ```
+- If your're getting SSL errors for the Websocket connection, you may need to explicitly tell webpack what certificate files to use. See the above section "HTTPS and Certificates"
 
 
 ## <a id="linting"></a> Linting