DEV Community

Tracy Adams
Tracy Adams

Posted on • Originally published at on

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() {
             b=$(tput bold)
             c=$(tput sgr0)
             local_ip=$(hostname -I | cut -d' ' -f1)
             # local_ip=999.999.999 # (uncomment for testing)
             if [[ ! -f $ssl_crt ]]; then
                 echo -e "\n🛑  ${b}Couldn't find a Slate SSL certificate:${c}"
             elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip) ]]; then
                 echo -e "\n🛑  ${b}Your IP Address has changed:${c}"
                 echo -e "\n${b}Your IP address is still the same.${c}"
             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
                     mv ./localhost+$count.pem $ssl_crt
                     mv ./localhost+$count-key.pem $ssl_key
  • 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!

Top comments (0)