Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTTPS in Development

See original GitHub issue

A workaround has been commented below, see:

Right now there’s just the general acceptance that the SSL Certificate will cause some friction.

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.

Source: Create React App Website

React’s website (and the development world really) has been gifted with Gatsby, and I think they got it right.

When you run a gatsby website in development mode with the --https flag, it will leverage the package devcert-san. It’s (near) frictionless, handles trusting the CA and gets you a proper lock on the browser bar.

I don’t think it’s really a high priority but wanted to bring it up.

Just to follow up, I also found this but haven’t worked with it (yet).


a PR implementing this feature has been open for a long time now: #5845

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:13
  • Comments:32 (2 by maintainers)

github_iconTop GitHub Comments

rluedercommented, Aug 11, 2022

The simple steps below worked for me:

  1. Install mkcert and run mkcert localhost

  2. add both the private key and certificate generated by mkcert to a single .pem file (e.g. server.pem)

  3. add a prestart line to your package.json under scripts (assuming the .pem file is inside of a /cert folder): "prestart": "cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl || :"

  4. start CRA in HTTPS mode: HTTPS=true npm start

  5. 💰 profit! 💰

Similar discussions:

Original solution by @Zwerge here: HTTPS In Development: A Practical Guide

ngduccommented, Apr 11, 2019

For those who searching for command line example, use the following: (thanks @rlueder)

brew install mkcert
mkcert localhost
cat ./localhost-key.pem ./localhost.pem > ./node_modules/webpack-dev-server/ssl/server.pem
npm run start       (HTTPS=true react-scripts start)

Otherwise, Chrome may block localhost https from loading. (at least for me recently)

Hopefully this PR will solve it completely later -

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use HTTPS for local development -
If you open your locally running site in your browser using HTTPS, your browser will check the certificate of your local development server....
Read more >
Using HTTPS in Your Development Environment - Auth0
The HTTPS protocol is mandatory for any website or web application. It guarantees trust and security, and its wide adoption is due to...
Read more >
How to get HTTPS working on your local development ...
The first step is to create a Root Secure Sockets Layer (SSL) certificate. This root certificate can then be used to sign any...
Read more >
HTTPS In Development: A Practical Guide - Marmelab
Why and how to setup HTTPS certificates, with or without reverse proxy, in a JavaScript development environment.
Read more >
Using HTTPS in Development | Create React App
Using HTTPS in Development ... You may require the dev server to serve pages over HTTPS. ... ($env:HTTPS = "true") -and (npm start)...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found