DEV Community

HTTPS In Development: A Practical Guide

Kmaschta on January 23, 2019

According to Firefox Telemetry, 76% of web pages are loaded with HTTPS, and this number is growing. Sooner or later, software engineers have to de...

Read full post

Christian • Jan 25 '19

I did implement this in CRA yesterday with no need for ejecting.

3 steps:

mkcert localhost

cat ~/.localhost-ssl/localhost-key.pem ~/.localhost-ssl/localhost.pem > {cra-path}/cert/server.pem

and then in package.json

"prestart": "cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl || :",

Justin Obney • Jan 28 '19 • Edited

Would you happen to know what this would look like on Windows? I see mkcert works fine on Windows..

UPDATE:

I have this working on Windows using mkcert & customize-cra

config-overrides.js

const fs = require('fs');
const path = require('path');
const {overrideDevServer} = require('customize-cra');

const configureHttps = () => config => {
  return {
    ...config,
    https: {
      key: fs.readFileSync(path.resolve(__dirname, './localhost+2-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, './localhost+2.pem')),
    },
  };
};

/* config-overrides.js */
module.exports = {
  devServer: overrideDevServer(
    // dev server plugin
    configureHttps()
  ),
};

Kmaschta • Jan 25 '19

Oh nice, thanks!
Can I add this snippet to the blog post and cite you as well?

Christian • Jan 25 '19

Of course! :)

Tiago Celestino • Jan 28 '19

nice hook.

Templar++ • Jan 25 '19

Why do you do that? Why create certificates like this when you have letencrypt?

Here's a hint: can register a real domain really cheap - just one then make subdomains for each of you projects - many registrars will provide you with a dns server as well, then create a real certificate via LetsEncrypt. This way you dev web server can be accessed from all of your coworkers and even customers without any issue. The effort isn't much different anyway.

Kmaschta • Jan 25 '19

By development environment, I mostly meant "localhost".
So, sure it's possible to update /etc/hosts and get a certificate from LetsEncrypt, but mkcert is so much simpler!

Vamp • Jan 24 '19

Fantastic mate thank you.

Jimmy Adaro • Jan 28 '19

I did a simple bash script to create a TLS certificate, add it to your macOS Keychain and also to your XAMPP Virtualhost file with a simple command. Check it here: github.com/jimmyadaro/secure-vhost

Mario Tilli • Jan 24 '19

I have to admit that I've never thought to use HTTPS in a development environment: that's weird! So thank you very much for this post!!

Sten • Jan 25 '19

mkcert is the one piece I've been missing! Thank!

Ashley Sheridan • Feb 8 '19

The default answer to whether or not to use HTTPS should not be yes. If you don't know how to answer the question, then ask the help of someone who can answer.

HTTPS can actually have a huge impact on performance. Content is unable to be cached correctly by many systems (e.g. proxy caching), and this can actually lead to the web being completely unusable: thenextweb.com/contributors/2018/0...

Sachin19219 • Jan 25 '19

Wow, excellent post, with great research done on putting linked articles.Thanks a lot for sharing.

Michael "lampe" Lazarski • Jan 24 '19

WoW! Great post! Thank you!

ploppy • Jan 24 '19

I‘d just wish I could tell the browser to trust my CA only for specific domains. Make sure to keep your private key secret, or it my be used to spoof other websites...

Thomas Bnt ☕ • Jan 28 '19

Woah, greaaat post!