DEV Community

rhymes
rhymes

Posted on

HTTPS localhost Really easy way to use HTTPS on localhost

Testing if your site works well on your local machine is always burdensome.

I found a tool that makes it really simple, mkcert:

➜  localhost-https mkcert -install
Using the local CA at "/Users/.../mkcert" ✨
The local CA is now installed in the system trust store! ⚑️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊
The local CA is now installed in Java''s trust store! β˜•οΈ

➜  localhost-https mkcert localhost
Using the local CA at "/Users/.../mkcert" ✨

Created a new certificate valid for the following names πŸ“œ
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" βœ…
Enter fullscreen mode Exit fullscreen mode

Then you can test with a simple HTML page:

➜  localhost-https cat index.html
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       β”‚ File: index.html
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   β”‚ <html>
   2   β”‚ <body>
   3   β”‚ HELLO WORLD
   4   β”‚ </body>
   5   β”‚ </html>
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
➜  localhost-https ./node_modules/http-server/bin/http-server -S -C ./localhost.pem -K ./localhost-key.pem                                                                                                                         [18:12:41]
Starting up http-server, serving ./ through https
Available on:
  https://127.0.0.1:8080
  https://192.168.1.69:8080
Hit CTRL-C to stop the server
Enter fullscreen mode Exit fullscreen mode

this is the result:

GitHub logo FiloSottile / mkcert

A simple zero-config tool to make locally trusted development certificates with any names you'd like.

mkcert

mkcert is a simple tool for making locally-trusted development certificates. It requires no configuration.

$ mkcert -install
Created a new local CA πŸ’₯
The local CA is now installed in the system trust store! ⚑️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

$ mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

Created a new certificate valid for the following names πŸ“œ
 - "example.com"
 - "*.example.com"
 - "example.test"
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" βœ…

Chrome and Firefox screenshot

Using certificates from real certificate authorities (CAs) for development can be dangerous or impossible (for hosts like example.test, localhost or 127.0.0.1), but self-signed certificates cause trust errors. Managing your own CA is the best solution, but usually involves arcane commands, specialized knowledge and manual steps.

mkcert automatically creates and installs a local CA in the system…

Discussion (26)

Collapse
johnhorner profile image
John Horner

OK, but, what version of cat is that? Never seen anything like it. And how do you turn the extra stuff off?

Collapse
rhymes profile image
rhymes Author

Hi John,

it's bat aliased to cat :-)

And how do you turn the extra stuff off?

what do you mean?

Collapse
johnhorner profile image
John Horner

I just meant if you wanted the standard behaviour of cat, because if you did cat file.txt > otherfile.txt that formatting would cause you to have a bad time, OK?

Thread Thread
rhymes profile image
rhymes Author

Ah ok!

No, it doesn't happen:

➜  ~ unalias cat
➜  ~ cat > filea.txt
this is a file written with standard cat
➜  ~ bat filea.txt
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       β”‚ File: filea.txt
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   β”‚ this is a file written with standard cat
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
➜  ~ bat filea.txt > fileb.txt
➜  ~ cat fileb.txt
this is a file written with standard cat
Thread Thread
turnerj profile image
James Turner • Edited on

I'm curious to how it knows to change the output depending where the output is directed to. Like aren't both stdout from the point of view of bat?

Thread Thread
rhymes profile image
rhymes Author

You can detect if the output is being redirected with POSIX functions isatty(3) and fstat(2)

Collapse
andy profile image
Andy Zhao (he/him)

Hope it works well with Rails. I have had so much trouble trying to a local HTTPS server running with Rails :( I almost always end up using ngrok.

Collapse
thorstenspringhart profile image
Thorsten Springhart • Edited on

Works fine with rails. After creating / installing your certificate as described in the article, start your rails server via rails s -b 'ssl://localhost:3000?key=./localhost-key.pem&cert=./localhost.pem'

Collapse
rhymes profile image
rhymes Author

Let me know, I haven't tried :)

Collapse
rhymes profile image
rhymes Author

I'm not that familiar with Docker so I don't know. The tool is a standard Go binary and I guess if you open the port of the web app serving you might accomplish something.

You need to root in your container to install it though, just downgrade your permissions after that.

Collapse
nssimeonov profile image
Templar++

Why? You can create a test domain or subdomain and use letsencrypt.

Collapse
rhymes profile image
rhymes Author • Edited on

You can also use ngrok, mkcert seems easier than all the options I can think of, ngrok included

Collapse
nssimeonov profile image
Templar++

Yes, but letsencrypt will work even if someone else is accessing your dev server and the effort isn't any bigger, so why bother creating local certificates if you can create a valid one?

Thread Thread
rhymes profile image
rhymes Author • Edited on

Can you write an article about it? It would be useful for everyone. Thank you!

Thread Thread
alexeydc profile image
Alexey

I love the mkcert setup you describe. That said, letsencrypt is also awesome!

I've written an article about it: dev.to/alexeydc/modern-https-confi...

Collapse
avalander profile image
Avalander

Hey, that's really useful, thanks for sharing!

Collapse
anonimoconiglio profile image
Santiago

Do you know if this works with a XAMPP or LAMPP localhost server? I would like to use this for my wordpress projecs.

Collapse
rhymes profile image
rhymes Author

I believe so, it's independent from the technology of the server. It just needs to support TLS.

I'm not familiar with either XAMPP or LAMPP but judging from a search engine query you need a tutorial on how to use a certificate with Apache. This seems a valid one (from Step 2): digitalocean.com/community/tutoria...

Collapse
anonimoconiglio profile image
Santiago

Thanks, in the past I tried some tutorials and other techniques but I found difficult to install them in the browser "trust stores", this one seems easy, I will give it a try!

Collapse
thisismahmoud profile image
Mahmoud Abdelwahab

Can I use this with Next.js?

Collapse
rhymes profile image
rhymes Author

I'm not familiar with Next.js but it's language agnostic. As long as you can point a web server to the certificate you should be able to use it!

Collapse
thisismahmoud profile image
Mahmoud Abdelwahab

I figured it out. I used a custom server and pointed it to the certificate. Thanks!

Collapse
saurabhcodeword profile image
Saurabh

Thanks
Thanks
Thanks
Thanks
Thanks
Thanks πŸ™

Collapse
jmojico profile image
Julian Mojico

This is exactly what I needed....trying it right now...thanks for sharing!

Collapse
mzaini30 profile image
Zen

Cool