How To Setup Shopify Slate on Ubuntu

So recently, I've started to make the move off MacOS as my daily work driver and was trying to work solely on my Windows 10 Laptop (Razer Blade). Well, it was all fine and dandy with my sweet WSL2 setup, until I encountered an issue. There's no official instructions on how to use Shopify Slate properly on Linux.

In this post, I'd like to document my steps taken to properly get a local SSL setup while still following Shopify Slate's instructions with their ssl-check shell function they provide you.

Note: I've made a PR with documentation updates to the Shopify Slate repo!

1. Follow all the Shopify Slate instructions up to the "Create a self-signed SSL certificate" step
2. Once at this step, do the following:

• Install mkcert by following these instructions from the official mkcert repo

• Add the following function to your shell profile (.bash_profile, .zshrc, .bashrc, etc...)
  

       function ssl-check() {
           f=~/.localhost_ssl;
           ssl_crt=$f/server.crt
           ssl_key=$f/server.key
           b=$(tput bold)
           c=$(tput sgr0)
  
           local_ip=$(hostname -I | cut -d' ' -f1)
           # local_ip=999.999.999 # (uncomment for testing)
  
           domains=(
               "localhost"
               "$local_ip"
           )
  
           if [[ ! -f $ssl_crt ]]; then
               echo -e "\n🛑  ${b}Couldn't find a Slate SSL certificate:${c}"
               make_key=true
           elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip) ]]; then
               echo -e "\n🛑  ${b}Your IP Address has changed:${c}"
               make_key=true
           else
               echo -e "\n✅  ${b}Your IP address is still the same.${c}"
           fi
  
           if [[ $make_key == true ]]; then
               echo -e "Generating a new Slate SSL certificate...\n"
               count=$(( ${#domains[@]} - 1))
               mkcert ${domains[@]}
  
               # Create Slate's default certificate directory, if it doesn't exist
               test ! -d $f && mkdir $f
  
               # It appears mkcert bases its filenames off the number of domains passed after the first one.
               # This script predicts that filename, so it can copy it to Slate's default location.
               if [[ $count = 0 ]]; then
                   mv ./localhost.pem $ssl_crt
                   mv ./localhost-key.pem $ssl_key
               else
                   mv ./localhost+$count.pem $ssl_crt
                   mv ./localhost+$count-key.pem $ssl_key
               fi
           fi
       }
  

• The biggest difference with this script is the local_ip assignment. The one that is in the official Slate Documentation only handles for MacOS. This should work for most Linux environments (tested on Ubuntu 16.04 - 19.10)

1. Restart your terminal or run source <location of your shell profile>
2. Run ssl-check and then run mkcert -install
3. You will need to restart your currently open browsers for these changes to take effect

You should now have a functioning local SSL setup for Shopify Slate. You can yarn start your heart out!