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

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