ssl-check script hitting errors on Windows 10

[HauntedSmores]

I would like to start by mentioning that I'm well aware that the Slate team is expecting there to be issues with the Slatev1 on win10, as they have started numerous times that they have not have not yet tested everything outside of macOS.

With that being said, I think its very close and this particular issue might be resolved with help from some bash nerds + Windows users.

Problem

When setting up the SSL certificate, as described here, the ssl-check function runs into some issues. Im not knowledgeable enough in the tools used in this step of the process to do anything meaningful with these errors but theyre still pretty descriptive and I think someone else likely will be.

Note: This is after installing mkcert on Windows 10 using chocolaty, then running mkcert -install in Powershell as admin (which gave success messages), and step 2 in the docs using git-bash (linked above).

I can see the certs in my file system at
C:\Users\name\AppData\Local\mkcert\rootCA.pem
and
C:\Users\name\AppData\Local\mkcert\rootCA-key.pem

$ ssl-check

Manipulates network routing tables.

ROUTE [-f] [-p] [-4|-6] command [destination]
                  [MASK netmask]  [gateway] [METRIC metric]  [IF interface]

  -f           Clears the routing tables of all gateway entries.  If this is
               used in conjunction with one of the commands, the tables are
               cleared prior to running the command.

  -p           When used with the ADD command, makes a route persistent across
               boots of the system. By default, routes are not preserved
               when the system is restarted. Ignored for all other commands,
               which always affect the appropriate persistent routes.

  -4           Force using IPv4.

  -6           Force using IPv6.

  command      One of these:
                 PRINT     Prints  a route
                 ADD       Adds    a route
                 DELETE    Deletes a route
                 CHANGE    Modifies an existing route
  destination  Specifies the host.
  MASK         Specifies that the next parameter is the 'netmask' value.
  netmask      Specifies a subnet mask value for this route entry.
               If not specified, it defaults to 255.255.255.255.
  gateway      Specifies gateway.
  interface    the interface number for the specified route.
  METRIC       specifies the metric, ie. cost for the destination.

All symbolic names used for destination are looked up in the network database
file NETWORKS. The symbolic names for gateway are looked up in the host name
database file HOSTS.

If the command is PRINT or DELETE. Destination or gateway can be a wildcard,
(wildcard is specified as a star '*'), or the gateway argument may be omitted.

If Dest contains a * or ?, it is treated as a shell pattern, and only
matching destination routes are printed. The '*' matches any string,
and '?' matches any one char. Examples: 157.*.1, 157.*, 127.*, *224*.

Pattern match is only allowed in PRINT command.
Diagnostic Notes:
    Invalid MASK generates an error, that is when (DEST & MASK) != DEST.
    Example> route ADD 157.0.0.0 MASK 155.0.0.0 157.55.80.1 IF 1
             The route addition failed: The specified mask parameter is invalid. (Destination & Mask) != Destination.

Examples:

    > route PRINT
    > route PRINT -4
    > route PRINT -6
    > route PRINT 157*          .... Only prints those matching 157*

    > route ADD 157.0.0.0 MASK 255.0.0.0  157.55.80.1 METRIC 3 IF 2
             destination^      ^mask      ^gateway     metric^    ^
                                                         Interface^
      If IF is not given, it tries to find the best interface for a given
      gateway.
    > route ADD 3ffe::/32 3ffe::1

    > route CHANGE 157.0.0.0 MASK 255.0.0.0 157.55.80.5 METRIC 2 IF 2

      CHANGE is used to modify gateway and/or metric only.

    > route DELETE 157.0.0.0
    > route DELETE 3ffe::/32

?  Couldn't find a Slate SSL certificate:
Generating a new Slate SSL certificate...

Using the local CA at "C:\Users\degal\AppData\Local\mkcert" ✨
ERROR: "\r" is not a valid hostname or IP
mv: cannot stat './localhost+1.pem': No such file or directory
mv: cannot stat './localhost+1-key.pem': No such file or directory

Replication steps

Follow normal Slate installation instructions as provided by the wiki on Windows 10 using git-bash for most of the way, but installing mkcert using Powershell as admin.

Follow part 4 of the wiki and run the ssl-check to produce the error.

More Information

Windows 10
git-bash/powershell
node v8.9.3
npm v6.4.1

[markfenske84]

I'm having the exact same problem. Same replication steps and here's my system:
Win10
git-bash/powershell
node v8.11.1
npm v6.4.1

Removing "$local_ip" in the domains array inside the ssl-check function seems to have resolved the issue for me.

[markfenske84]

@tachjon

Thanks for the tip! That did allow my ssl-check function to process properly, however I'm still not seeing the "./localhost.pem" and the key at "./localhost-key.pem" inside of my mkcert folder and Im still shown a red HTTPS. I still only have the root files @HauntedSmores mentioned. So even though it says it's creating the files when the function runs, it doesn't seem to actually be creating them.

[pie2211]

@markfenske84

Check your Windows user directory, the .localhost folder containing the server key should be in there. I can confirm that manually adding your local IP fixes the script problem on Windows and the key is created in the user directory (see below).

This is the Slate-tools.schema.js entry pointing to the key's location:

// Path to self-signed SSL certificate which is used when developing
// (browsersync, asset server) to avoid browsers rejecting requests based
// on SSL
'ssl.cert': path.resolve(os.homedir(), '.localhost_ssl/server.crt'),

// Path to self-signed SSL key which is used when developing
// (browsersync, asset server) to avoid browsers rejecting requests based
// on SSL
'ssl.key': path.resolve(os.homedir(), '.localhost_ssl/server.key'),

Hope that helps.

[HauntedSmores]

@pie2211 Is this a workaround for the ssl-check script altogether?

[saintplay]

+Here is how I do it manually

cd ~/.localhost_ssl
mkcert -install
mkcert localhost 127.0.0.1 <YOUR_LOCAL_IP_HERE>
mv localhost+2-key.pem server.key
mv localhost+2.pem server.crt

[pie2211]

@HauntedSmores not a work around no, just pointing you to the location of the server.key and server.cert when it's successfully output by the SSl check script using the IP fix for Win10 suggested by @tachjon.

Alternatively just do as @saintplay suggests to generate the necessary key and certificate files to any directory you like. The thing to note is wherever/however you decide to generate/move/copy the key and certificate, you may have to update the paths to both those files in the following Slate Tools file:

yourthemeprojectfolder/node_modules/@shopify/slate-tools/slate-tools.schema.js

Otherwise express server won't know where to find them when it's fired up by Slate - some generic localhost cert will be loaded into the browser instead, Chrome in my case, giving you the untrusted message.

What I did to get it all working in Chrome on my Win 10 machine was:

• Modify the ssl-check script to take my local machine IP directly:

domains=(
        "localhost"
        "192.168.x.x"
    )

• Ran the script with no errors.
• Confirmed that server.key and server.crt were output to: C:\Users\YourUserName.localhost_ssl
• Checked the paths to the key and certificate were pointed to the above folder in mytheme/node_modules/@shopify/slate-tools/slate-tools.schema.js

// Path to self-signed SSL certificate which is used when developing
// (browsersync, asset server) to avoid browsers rejecting requests based
// on SSL
'ssl.cert': path.resolve(os.homedir(), '.localhost_ssl/server.crt'),

// Path to self-signed SSL key which is used when developing
// (browsersync, asset server) to avoid browsers rejecting requests based
// on SSL
'ssl.key': path.resolve(os.homedir(), '.localhost_ssl/server.key'),

• Checked that Chrome was displaying the correct certificate and not a generic one.
• Once I knew that was all correct I was able to rectify my specific issue by following the instructions at the following link to get Chrome 58+ to accept the certificate output by mkcert: https://www.nullalo.com/en/chrome-how-to-install-self-signed-ssl-certificates/

[markfenske84]

@pie2211

This may be a stupid question, but I never had a slate-tools.schema.js file inside of my node slate-tools folder. Is there any reason why that wouldn't have been included? Everything else has worked as expected from the steps you've laid out - script runs with no errors and server files are created in .localhost_ssl folder. However when I went to check the paths in my slate-tools.scheme.js file, that file was nowhere to be found. I tried creating the file from scratch and adding that code, but I still cant get this to work. I'm wondering if maybe because the file wasnt there originally, its not being referenced in some other part of the code, so it doesn't know to look up this file? Maybe.... I'm really at a loss with the one.

[pie2211]

@markfenske84 what version of Slate are you using for your project? I was referring to v1.0 in the posts above, you can find the schema file here:
https://github.com/Shopify/slate/tree/master/packages/slate-tools

Not sure where v0.x sets the path to the certificate but I’d assume the default location would be the same pace - in the root of your Window’s user directory.

[markfenske84]

@pie2211, yep that looks to be the issue! Looks like i'm using 0.14 on my original project. I've created a new project for another new site I'll be building and that one is v1 and has the file.

I'll see if I can't get it working now that I have a full version of the schema file. Thanks again!

EDIT: I was able to get this working fine on the new install. It looks like however, the main issue for why I started to work on getting the SSL issue fixed in the first place is still present. That being browser-sync not working. Everything is compiling and uploading as expected (in both v1 and v0.14 projects), but in both, browser-sync is a no-show and I can't figure out for the life of me why. It doesn't drastically hinder my development process, but it sure would be nice to have BS actually reloading the browser.

[hcmlopes]

I can say @saintplay steps worked for me in creating the certificate but because of going back and forth from powershell to bash got a bit confusing, I decided to post a set of commands that will get the job done in powershell

edit:
These steps are working with Windows 10 Build 17134 - Nov 26 2018 and all other applications and packages updated as of the same date

Step 1

If you don't have Chocolatey installed go to https://chocolatey.org/install and follow their instructions

Step 2

Install mkcert by running choco install mkcert

Instructions taken from https://github.com/FiloSottile/mkcert

Step 3

copy and paste the code below into your powershell

New-Item -Path ~/.localhost_ssl -ItemType directory
cd ~/.localhost_ssl
mkcert -install
mkcert localhost 127.0.0.1 $(ipconfig | where {$_ -match 'IPv4.+\s(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})' } | out-null; $Matches[1])
mv localhost+*-key.pem server.key
mv localhost+*.pem server.crt

Step 4

run yarn watch or yarn start and once the browser loads your localhost certificate problems should be fixed

To install root SSL certificate in windows 10, use Microsoft Management Console(MMC)

Step 1: Click Start > Run
Step 2: Enter MMC to open Microsoft Management Console.
Step3: Go to File > Add/Remove Snap-in
Step 4: Click Certificates, and select Add
Step 5: Select Computer Account, and click Next
Step 6: Select Local Computer and click Finish
Step 7: Click OK to go back to main MMC console window.
Step 8:Double-click Certificates (local computer) to expand its view.
Step 9:Right-click Certificates under Trusted Root Certification Authorities and select All Tasks then Import
Step 10:Complete the wizard to import the chain certificate. Browse to locate the chain certificate to be imported or rootSSL.pem file to import
Step 11: Select Place all certificates in the following store and select the Trusted Root Certification Authorities store.Click Next; then click Finish to complete the wizard.
Once the "import was successful" then you can locate your installed certificate authority in certificate pane.

Then...

Check Your Antivirus Software Or Firewall

Your antivirus software might block some strange SSL certificates or connections. Thus be sure to Enable https scanning in your antivirus software or firewall.

If you can not find Enable https scanning feature in your software, you can choose to turn off the software temporarily. Then check if you can visit the website normally.

[hcmlopes]

To install root SSL certificate in windows 10, use Microsoft Management Console(MMC)

Step 1: Click Start > Run
Step 2: Enter MMC to open Microsoft Management Console.
Step3: Go to File > Add/Remove Snap-in
Step 4: Click Certificates, and select Add
Step 5: Select Computer Account, and click Next
Step 6: Select Local Computer and click Finish
Step 7: Click OK to go back to main MMC console window.
Step 8:Double-click Certificates (local computer) to expand its view.
Step 9:Right-click Certificates under Trusted Root Certification Authorities and select All Tasks then Import
Step 10:Complete the wizard to import the chain certificate. Browse to locate the chain certificate to be imported or rootSSL.pem file to import
Step 11: Select Place all certificates in the following store and select the Trusted Root Certification Authorities store.Click Next; then click Finish to complete the wizard.
Once the "import was successful" then you can locate your installed certificate authority in certificate pane.

Then...

Check Your Antivirus Software Or Firewall

Your antivirus software might block some strange SSL certificates or connections. Thus be sure to Enable https scanning in your antivirus software or firewall.

If you can not find Enable https scanning feature in your software, you can choose to turn off the software temporarily. Then check if you can visit the website normally.

I did these exact steps but since I don't understand too much about ssl and how certificates work I don't know if there is something I missed as this way never worked for me. Whenever I ran yarn start, slate-tools just couldn't find the location for the certificate and then nothing worked right. The commands I posted in my previous comment are sure proof it will work with slate 1.0.0-beta.14 and its an easy copy and paste into powershell

To install root SSL certificate in windows 10, use Microsoft Management Console(MMC)
Step 1: Click Start > Run
Step 2: Enter MMC to open Microsoft Management Console.
Step3: Go to File > Add/Remove Snap-in
Step 4: Click Certificates, and select Add
Step 5: Select Computer Account, and click Next
Step 6: Select Local Computer and click Finish
Step 7: Click OK to go back to main MMC console window.
Step 8:Double-click Certificates (local computer) to expand its view.
Step 9:Right-click Certificates under Trusted Root Certification Authorities and select All Tasks then Import
Step 10:Complete the wizard to import the chain certificate. Browse to locate the chain certificate to be imported or rootSSL.pem file to import
Step 11: Select Place all certificates in the following store and select the Trusted Root Certification Authorities store.Click Next; then click Finish to complete the wizard.
Once the "import was successful" then you can locate your installed certificate authority in certificate pane.
Then...
Check Your Antivirus Software Or Firewall
Your antivirus software might block some strange SSL certificates or connections. Thus be sure to Enable https scanning in your antivirus software or firewall.
If you can not find Enable https scanning feature in your software, you can choose to turn off the software temporarily. Then check if you can visit the website normally.

I did these exact steps but since I don't understand too much about ssl and how certificates work I don't know if there is something I missed as this way never worked for me. Whenever I ran yarn start, slate-tools just couldn't find the location for the certificate and then nothing worked right. The commands I posted in my previous comment are sure proof it will work with slate 1.0.0-beta.14 and its an easy copy and paste into powershell

Yes yours is probably a much simpler solution but it didn't work for my colleague on windows 10 so I thought I'd provide an alternative. Plus not everyone uses powershell.