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

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.

Advert
End of Advert

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
Advert
End of Advert

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!

Advert
End of Advert
I know I signed it myself, error-san. It's my localhost! I should be able to do whatever I want to it!
Advert
End of Advert

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.

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
Enjoyed the post? Give nabe-chan some hearts!
- hearts received
Thank you for reading our blog
Geeknabe is a small blog that I personally coded up, and we do it because we love what we do. You can take a look at our
related posts
for more blog posts, or check out our
topics
listed in our footer.
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.