From 7ca0da3d8587c08d2636eed2aeb7337b18002c37 Mon Sep 17 00:00:00 2001 From: Lloyd Brookes Date: Sun, 13 Dec 2015 12:40:24 +0000 Subject: [PATCH] display a hostname-based URL on launch.. https docs.. --- README.md | 29 +++++++++++++++++++++++------ bin/cli.js | 4 +++- jsdoc2md/README.hbs | 29 +++++++++++++++++++++++------ 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 7c84709..e0d1305 100644 --- a/README.md +++ b/README.md @@ -394,7 +394,12 @@ Some modern techs (ServiceWorker, any `MediaDevices.getUserMedia()` request etc. $ ws --key localhost.key --cert localhost.crt ``` -You need a valid certificate, you do not need third-party verification (Verisign etc.). To create a certificate is trivial: +If you don't have a key and certificate it's trivial to create them. You do not need third-party verification (Verisign etc.) for development purposes. To get the green padlock in the browser, the certificate.. + +* must have a `Common Name` value matching the FQDN of the server +* must be verified by a Certificate Authority (but we can overrule this - see below) + +First create a certificate: 1. Install openssl. @@ -408,24 +413,36 @@ You need a valid certificate, you do not need third-party verification (Verisign ``` $ openssl rsa -passin pass:x -in ws.pass.key -out ws.key - $ rm ws.pass.key ``` -4. Create certificate request. **Important**: you **must** put your local server's correct FQDN (typically `127.0.0.1`, `localhost`, `dev-server.local` etc.) into the `Common Name` field. The cert will only work on the domain specified here. +4. Create certificate request. The command below will ask a series of questions about the certificate owner. The most imporant answer to give is for `Common Name`, you can accept the default values for the others. **Important**: you **must** input your server's correct FQDN (`dev-server.local`, `laptop.home` etc.) into the `Common Name` field. The cert is only valid for the domain specified here. You can find out your computers host name by running the command `hostname`. For example, mine is `mba3.home`. `$ openssl req -new -key ws.key -out ws.csr` 5. Generate self-signed certificate. - `$ openssl x509 -req -days 365 -in ws.csr -signkey ws.key -out ws.crt` + `$ openssl x509 -req -days 365 -in ws.csr -signkey ws.key -out ws.crt` + +6. Clean up files we're finished with + + `$ rm ws.pass.key ws.csr` -5. Launch HTTPS server. +7. Launch HTTPS server. In iTerm, control-click the first URL (with the hostname matching `Common Name`) to launch your browser. ``` $ ws --key ws.key --cert ws.crt - serving at https://127.0.0.1:8000, https://192.168.1.203:8000 + serving at https://mba3.home:8010, https://127.0.0.1:8010, https://192.168.1.203:8010 ``` +Chrome and Firefox will still complain your certificate has not been verified by a Certificate Authority. Firefox will offer you an `Add an exception` option, allowing you to ignore the warning and manually mark the certificate as trusted. In Chrome on Mac, you can manually trust the certificate another way: + +1. Open Keychain +2. Click File -> Import. Select the `.crt` file you created. +3. In the `Certificates` category, double-click the cert you imported. +4. In the `trust` section, underneath `when using this certificate`, select `Always Trust`. + +Now you have a valid, trusted certificate for development. + ### Stored config Use the same options every time? Persist then to `package.json`: diff --git a/bin/cli.js b/bin/cli.js index 42d69af..6a2a909 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -71,10 +71,12 @@ function stop (msgs, exitCode) { } function onServerUp () { - const ipList = Object.keys(os.networkInterfaces()) + let ipList = Object.keys(os.networkInterfaces()) .map(key => os.networkInterfaces()[key]) .reduce((prev, curr) => prev = prev.concat(curr), []) .filter(iface => iface.family === 'IPv4') + ipList.unshift({ address: os.hostname() }) + ipList = ipList .map(iface => `[underline]{${isHttps ? 'https' : 'http'}://${iface.address}:${options.server.port}}`) .join(', ') diff --git a/jsdoc2md/README.hbs b/jsdoc2md/README.hbs index 4595852..16ac633 100644 --- a/jsdoc2md/README.hbs +++ b/jsdoc2md/README.hbs @@ -394,7 +394,12 @@ Some modern techs (ServiceWorker, any `MediaDevices.getUserMedia()` request etc. $ ws --key localhost.key --cert localhost.crt ``` -You need a valid certificate, you do not need third-party verification (Verisign etc.). To create a certificate is trivial: +If you don't have a key and certificate it's trivial to create them. You do not need third-party verification (Verisign etc.) for development purposes. To get the green padlock in the browser, the certificate.. + +* must have a `Common Name` value matching the FQDN of the server +* must be verified by a Certificate Authority (but we can overrule this - see below) + +First create a certificate: 1. Install openssl. @@ -408,24 +413,36 @@ You need a valid certificate, you do not need third-party verification (Verisign ``` $ openssl rsa -passin pass:x -in ws.pass.key -out ws.key - $ rm ws.pass.key ``` -4. Create certificate request. **Important**: you **must** put your local server's correct FQDN (typically `127.0.0.1`, `localhost`, `dev-server.local` etc.) into the `Common Name` field. The cert will only work on the domain specified here. +4. Create certificate request. The command below will ask a series of questions about the certificate owner. The most imporant answer to give is for `Common Name`, you can accept the default values for the others. **Important**: you **must** input your server's correct FQDN (`dev-server.local`, `laptop.home` etc.) into the `Common Name` field. The cert is only valid for the domain specified here. You can find out your computers host name by running the command `hostname`. For example, mine is `mba3.home`. `$ openssl req -new -key ws.key -out ws.csr` 5. Generate self-signed certificate. - `$ openssl x509 -req -days 365 -in ws.csr -signkey ws.key -out ws.crt` + `$ openssl x509 -req -days 365 -in ws.csr -signkey ws.key -out ws.crt` + +6. Clean up files we're finished with + + `$ rm ws.pass.key ws.csr` -5. Launch HTTPS server. +7. Launch HTTPS server. In iTerm, control-click the first URL (with the hostname matching `Common Name`) to launch your browser. ``` $ ws --key ws.key --cert ws.crt - serving at https://127.0.0.1:8000, https://192.168.1.203:8000 + serving at https://mba3.home:8010, https://127.0.0.1:8010, https://192.168.1.203:8010 ``` +Chrome and Firefox will still complain your certificate has not been verified by a Certificate Authority. Firefox will offer you an `Add an exception` option, allowing you to ignore the warning and manually mark the certificate as trusted. In Chrome on Mac, you can manually trust the certificate another way: + +1. Open Keychain +2. Click File -> Import. Select the `.crt` file you created. +3. In the `Certificates` category, double-click the cert you imported. +4. In the `trust` section, underneath `when using this certificate`, select `Always Trust`. + +Now you have a valid, trusted certificate for development. + ### Stored config Use the same options every time? Persist then to `package.json`: