Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

Local HTTPS

Gatsby provides a way to use a local HTTPS server during development, thanks to devcert. When you enable the https option, a private key and certificate file will be created for your project and used by the development server.

Usage (automatic HTTPS)

Start the development server using npm run develop as usual, and add either the -S or --https flag.

Setup

When setting up a development SSL certificate for the first time, you may be asked to type in your password after starting the development environment:

On Windows, the prompt will differ:

The password is only required the first time you are using Gatsby’s HTTPS feature on your machine, or when you are creating a brand-new certificate.

Using Certutil

After typing in your password, devcert will install the CA certificate in your operating system trusted certs store. A utility called certutil will be needed to update the trust store for various browsers; specifically: Firefox, and Chrome (when it’s running on Linux).

devcert is configured to install certutil automatically, unless you’re running Windows. If an automatic install is not successful, you may need to install it manually.

Manual installation of Certutil

To install certutil, you need to install the nss tools package(s). The exact procedure will differ depending on your operating system.

Linux

On a Linux OS, you should be able to run one of the following, depending on your Linux distro:

macOS

Run the following command:

Windows

Pre-compiled libraries are rare, so you may need to compile it yourself. Because of how difficult Windows makes it, devcert will not attempt to update the Firefox trust store automatically; instead, it will fall back to using the “Firefox wizard”, detailed below.

Debugging installation

If you choose not to install certutil, or the automatic install is not successful, you may get the following errors/prompts:

Chrome on Linux

Firefox

If you have Firefox installed, devcert will try to utilize Firefox itself to trust the certificate

Your options are as follows:

  • Press enter and it will launch Firefox for you.

  • If you wish to have trust support on Firefox, tell the point-and-click wizard this certificate can identify websites, and click OK. Otherwise, you may hit cancel and close the browser, then key return to finish building. Reminder: you’ll only need to do this once per machine.

After devcert setup process

You can open the development server at https://localhost:8000 and enjoy the HTTPS goodness ✨. You may change the port according to your setup.

Find out more about how devcert works.

Management of certificates generated by devcert

If you want to do some maintenance/cleanup of the certificates generated by devcert, please refer to the devcert-cli

Custom key and certificate files

You may find that you need a custom key and certificate file for HTTPS if you use multiple machines for development (or if your dev environment is containerized in Docker).

If you need to use a custom HTTPS setup, you can pass the --https, --key-file, --cert-file, and --ca-file flags to npm run develop.

  • --cert-file [relative/absolute path to SSL certificate file]
  • --key-file [relative/absolute path to SSL key file]
  • --ca-file [relative/absolute path to SSL certificate authority file]

Using npm run develop

Note: You can use relative or absolute paths with this command

Using the Gatsby CLI

Note: You can use relative or absolute paths with this command

Flag usage

Usage of the --ca-file flag is only required if your certificate is signed by a certificate authority.

If your certificate is self-signed, then do not include the --ca-file flag. Also, if you want your browser to trust a self-signed certificate, you will need to add it to your operating system (or browser’s, in Firefox’s case) root certificate store for your browser to trust it.

In most cases, the --https passed by itself is easier and more convenient to get local HTTPS.


Automatic certificates issued with the --https flag are issued to localhost by default, unless you have used the --host flag. If you have, a record in your hosts file will automatically be configured to point the defined host to 127.0.0.1. At this time, ip addresses defined by --host are not supported.

Start building today on Netlify!
Edit this page on GitHub
© 2024 Gatsby, Inc.