Dev Environment with Localhost SSL

Have you ever wanted to set up SSL for localhost development on your computer? No? As hard as this can be at times, me neither. What changed? Recently, I have been working on a Rails contract project, and it was set up with SSL. I needed to set up SSL on my Linux computer to collaborate on the project.

Why do you need SSL in development? Check this tweet to find the answer.

So there is one solution, Puma-dev; however, even with Linux support, the solution and setup never worked for me.

Solution

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt

You will be provided with fields to fill in, such as country key, email, etc. However, you can skip this step. This command will create two new files, localhost.key and localhost.crt, in the current directory. You can move these files anywhere.

Open in your browser: https://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt. Make sure the certificate and key location are correct in the URL string.

FYI: You will have to accept the certificate in your browser the first time you open the URL.

Rails Server and Webpack

You cannot use the standard rails server , as this defaults to http://localhost:3000. Instead, use the following command:

rails s -b 'ssl://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt'

I have included it in a ZSH alias, which is much easier to remember:

alias rss="rails s -b 'ssl://localhost:3000?key=/path/to/localhost.key&cert=/path/to/localhost.crt'"

What about Webpack, which I like to start in a separate terminal window? It is actually not that hard and is documented in the Webpack repository: Webpack SSL. Basically, we have to enable https in config/webpacker.yml, start webpacker like normal and accept the certificate.

Credit: Localhost SSL