How to add SSL to your localhost development environment using Ruby on Rails with Puma

Hi readers!

Well, with the new update from Chrome from 80, if we have third party cookies you will need to add theSameSite=None; Secure , but this means that third party cookies will only be sent over HTTPS connection.

The following video is explaining this way better than me:

Also, I leave you guys a blog post from Chrome with the SameSite Cookie Changes.

OK, so if you are like me, who is developing services that shared a cookie between each other and using Ruby on Rails with Puma as your web server you will need to have HTTPS connection.

Creating a certificate

So the first thing you will need to do is to create a certificate for your service you want to add the HTTPS connection. Let’s use mkcert to generate it, i’m going to localhost, but you can use whatever name you want

➜  ~ mkcert localhost
Using the local CA at "/Users/marianomatayoshi/Library/Application Support/mkcert" ✨
Warning: the local CA is not installed in the system trust store! ⚠️
Warning: the local CA is not installed in the Firefox trust store! ⚠️
Run "mkcert -install" to avoid verification errors ‼️
Created a new certificate valid for the following names 📜
- "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

Now we should mark these cert as trusted, I’m working on a Mac computer, so not sure how to handle this particular part on Windows or on a Linux distro.

For Mac users open the Keychain Access and drag the certificate to the Keychain, the localhost.pem file, you could see some error, but it will end up adding it..

Just after adding the certificate

Double-click the cert you just added, click the -> Trust

After double clicking the cert

And at the When using this certificate: select the Always Trust option.

Always trust the cert

Localhost on SSL

Now the interesting part:

In your puma config you will want to have something like this:

I ended up creating a local-certs folder inside config folder and pasted the cert and key there.

Then running bundle exec puma -C puma.rb will prompt something like this

➜  ~ bundle exec puma -C puma.rb
[97] Puma starting in cluster mode...
[97] * Version 4.1.0 (ruby 2.3.8-p459), codename: Fourth and One
[97] * Min threads: 5, max threads: 5
[97] * Environment: development
[97] * Process workers: 2
[97] * Phased restart available
[97] * Listening on tcp://0.0.0.0:3001
[97] * Listening on ssl://0.0.0.0:3000?cert=config/local-certs/localhost.pem&key=config/local-certs/localhost-key.pem&verify_mode=none&no_tlsv1=false&no_tlsv1_1=false
[97] Use Ctrl-C to stop
[97] - Worker 0 (pid: 105) booted, phase: 0
[97] - Worker 1 (pid: 108) booted, phase: 0

And if you go to https://localhost:3000, you will see something like this🤘

SSL on localshot:3000

Hope it helps you to sort out the Chrome update, ping me here or follow me on Twitter, StackOverflow, LinkedIn or Github 😁

Mariano Matayoshi (matayoshi.mariano@gmail.com)