loading...

How To Setup Shopify Slate on Ubuntu

tracycodes profile image Tracy Adams Originally published at tracycodes.com on ・2 min read

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!

Discussion

pic
Editor guide