DEV Community

Cover image for HTTPS In Development: A Practical Guide

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...
Collapse
 
zwergius profile image
Christian

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 || :",

Collapse
 
justinobney profile image
Justin Obney • 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()
  ),
};
Collapse
 
kmaschta profile image
Kmaschta

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

Collapse
 
zwergius profile image
Christian

Of course! :)

Collapse
 
tcelestino profile image
Tiago Celestino

nice hook.

Collapse
 
nssimeonov profile image
Templar++

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.

Collapse
 
kmaschta profile image
Kmaschta

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!

Collapse
 
vampiire profile image
Vamp

Fantastic mate thank you.

Collapse
 
jimmyadaro profile image
Jimmy Adaro

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

Collapse
 
mario_tilli profile image
Mario Tilli

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!!

Collapse
 
stenpittet profile image
Sten

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

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

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...

Collapse
 
sachin19219 profile image
Sachin19219

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

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

WoW! Great post! Thank you!

Collapse
 
ploppy1337 profile image
ploppy

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...

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Woah, greaaat post!