4. Create a self signed SSL certificate

Slate uses a local Express server to serve your assets locally. It's a good idea to create a trusted, self-signed SSL certificate on your device so the assets, served via https, are never blocked.

*An example of https requests to your local asset server being blocked*

*An example of Chrome warning you of an untrusted https certificate*

Run the following commands to install mkcert. See the installation docs for more details.

brew install mkcert

Copy and paste the bash function into your terminal or into your .bashrc file:

function ssl-check() {
    f=~/.localhost_ssl;
    ssl_crt=$f/server.crt
    ssl_key=$f/server.key
    b=$(tput bold)
    c=$(tput sgr0)
    
    local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}'))
    # 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
}