Do you use HTTPS in development?

Do you use HTTPS in web development?

You definitely should! And I hope this article will convince you it's a good idea to do so. You'll find below everything you need to get started.

Consistency

As a rule of thumb it's always a good idea to develop in the same environment used for deployment. In the web development world this translates to two major things: browser and protocol. HTTPS is everywhere nowadays, and modern browsers are exposing some functionality only to HTTPS; sooner or later HTTP will stop being used. Most probably, the web app you are developing will be served over HTTPS when is deployed.
Having this in mind, it's a good idea to use HTTPS in development.

But how?

If you are using a web bundler it's quite easy to enable HTTPS.

• for webpack, you should use this option of the dev server
• same story for parcel

If not, the solution is to use some valid digital certificates and to configure your web server to use them.

Let's see how we can do it.

Certificates

One solution

First you'll need to generate some certificates (which will work only on your machine). I recently found this awesome tool. After installing it, you'll have to run 2 commands:

$ mkcert -install
$ mkcert example.com "*.example.org" myapp.dev localhost 127.0.0.1 ::1

First line creates a local CA (certificate authority). When you'll deploy the final product, you will have to buy a certificate from a trusted 3rd party CA.

Second line creates a certificate for the inserted host names, using the previously created CA.

Other solutions

• one solution I'm aware of is using OpenSSL, but I haven't researched that in depth; feel free to do your own research and experiment

Webserver setup

The setup is quite easy on Apache and NGINX. In a nutshell, you'll need to enable SSL and tell Apache/NGINX where to find the certificates you've created with the second mkcert command. That's it.

I'll detail the setup for Apache. NGINX should be similar and easy to do.

1. Uncomment these lines in httpd/https.conf

LoadModule socache_shmcb_module lib/httpd/modules/mod_socache_shmcb.so
...
LoadModule ssl_module lib/httpd/modules/mod_ssl.so
...
Include /usr/local/etc/httpd/extra/httpd-ssl.conf

2. Make sure Apache listens on 443 for HTTPS requests. Check httpd/extra/httpd-ssl.conf.

Listen 443
...
<VirtualHost _default_:443>

3. In the same file, comment these 2 lines within <VirtualHost> tag

# DocumentRoot "/Library/WebServer/Documents"¬
# 125 ServerName www.example.com:443¬

4. Setup your virtual host in this file httpd/extra/httpd-vhosts.conf

<VirtualHost *:443>
    DocumentRoot "_website/location_"
    ServerName localhost
    SSLEngine on
    SSLCertificateFile "_mkcert/generated/certificate_"
    SSLCertificateKeyFile "_mkcert/generated/key_"
</VirtualHost>

5. Test your configuration and restart apache with these commands

$ sudo apachectl configtest
$ sudo apachectl -k restart

That's all

I hope you enjoyed this topic.

Code on!