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.
- 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 if you want to have it available in the future):
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
}
- Run the function you just declared in step 2:
ssl-check
- You now have successfully created a local, self-signed SSL certificate for developing with Slate!
Common mistakes
Even after performing the above steps, you might encounter the following errors and warnings when developing with Slate:
This is most likely because your local IP has changed and the self-signed SSL certificate you created is no longer valid. To remove these warnings and errors, simply repeat steps 2 and 3 above to regenerate a new self-signed certificate.