tech·gatsbyjs

How to enable https for GatsbyJS development server

Some scripts won't run unless tested in https. Here's how to make GatsbyJS development server run in https.

By nabe-chan
·
1 min read
-
0
Run your Gatsby development server in https.

J
ust days ago, I was doing a revamp on my blog's homepage. I wanted to add a Twitter timeline, a Pinterest board of my account and a widget that shows blogs that I follow.

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.

Advertisement

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 []: nabechandayo@example.com
Advertisement

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!

Advertisement
GatsbyJS's GraphQL Explorer don't like playing nice.
I know I signed it myself, error-san. It's my localhost! I should be able to do whatever I want to it!

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.

Chrome's warning page for unsafe site
Click on Proceed to move on. It should stop showing again the next time you run the server again.

You are now running localhost in https. Hurray!

Pro-tip:

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
- hearts received
About nabe-chan

Secretly thinks dubs are better than subs, Sword Art Online is actually not bad, and everyone must read from MangaPlus. Find out about the owner of this blog (it's me by the way) here.

UP