How to configure Secure SSL HTTPS in a Gatsby Site on Localhost Server

Add a SSL certificate to your localhost domain during development mode. Local HTTPS on a gatsby site.

1 min read
03 Feb 2022

How To Add SSL Your Locahost

Step 1

In the project root folder in the terminal, run:

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

Step 2

First your must create a pass phrase. you will need to remember/note this down as you will need it register your certificate and start your development environment.

Enter PEM pass phrase: ****** Verifying - Enter PEM pass phrase:******

You will be asked a series of questions.

Example Answers:

  • Country Name (2 letter code) [AU]: US
  • State or Province Name (full name) [Some-State]: UT
  • Locality Name (eg, city) []:Salt Lake City
  • Organization Name (eg, company) [Internet Widgits Pty Ltd]:Stefan Trinh
  • Organization Name (eg, company) [Internet Widgits Pty Ltd]:Development
  • Common Name (e.g. server FQDN or YOUR name) []:localhost
  • Email Address []:stefan@stefantrinh.com

Step 3

Run The following command to register the certificate:

openssl rsa -in keytmp.pem -out key.pem

you will be prompted to enter your password you created earlier.

Enter pass phrase for keytmp.pem:

there should be three files created in the root of your project.

  • key.pem
  • cert.pem
  • keytmp.pem

Step 3

in your package.json add the following command to the develop script.

"scripts": {
    "develop": "SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem gatsby develop --https",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"

Step 4

Run the Project

  gatsby develop

you will ber promoted to enter the password one time.

That's it your all done. you localhost should now be secure

© Stefan Trinh 2022