Twitter's was fairly simple. All I needed to do is add a script tag and a link. Done. However, Pinterest's is more strict with where its contents are shown. If embedded on a site running on http, it returns an error. This is a problem because I need to see that it is working before I push it to production. I can't be pushing to production just to check how things are!
So I tried looking around for a solution. I knew Gatsby's CLI has a --https command, but from my prior experience, I need a self-signed certificate as well.
You can easily create one using OpenSSL. Open up your terminal and type in openssl to check if you have it. If not, you'll need to download it. OpenSSL comes with Mac OSX. For Windows, openssl comes with Git Bash.
On your terminal, change your directory to your project's root folder and type the following:
openssl req -nodes -new -x509 -keyout server.key -out server.cert
A few questions will pop up, but you can leave them all empty by tapping the Enter key. However, do not leave Common Name and email address fields empty. Add localhost to the Common Name, and your email address to the email field.
Common Name (eg, fully qualified host name) : localhost Email Address : email@example.com
Done. You'll find 2 files in your project root's folder - server.key and server.cert. These are your private key and self-signed certificate respectively. Next, you'll need to include these two files in whenever you run the command gatsby develop.
In your package.json, add this script in:
gatsby develop --https --key-file server.key --cert-file server.cert
Run it, and everything seems to be running perfectly. That is, until you see an error from Gatsby's GraphQL Explorer. We're so close!
To prevent this error from happening again, add this environment variable right before you run gatsby develop as shown below.
NODE_TLS_REJECT_UNAUTHORIZED=0 // On Mac -> NODE_TLS_REJECT_UNAUTHORIZED=0 gatsby develop --https --key-file server.key --cert-file server.cert // On Windows -> set NODE_TLS_REJECT_UNAUTHORIZED=0&& gatsby develop --https --key-file server.key --cert-file server.cert
Run it again, and open . On Chrome, it should warn you but you can ignore it since the error is related to us self-signing the cert. Click on Proceed to localhost (unsafe) to view your localhost.
You are now running localhost in https. Hurray!
Add -H 0.0.0.0 to your gatsby develop/serve command to let other devices on the same network access your localhost. I use this often to check how the site looks like on other devices like IOS or Android phones.
gatsby develop -H 0.0.0.0