SSL | Localhostself-signed cert creation

https://medium.com/@TinaHeiligers1/localhost-on-https-my-domain-on-a-mac-c2f1a98d65a6

Localhost on https:// on a Mac

Aug 12, 2018·4 min read

What do you do if you need to serve local dev over a domain AND you need to serve it on https? A typical use case is interacting with a third party service that has cors locked down to specific white-listed domains. For example, let’s consider the case of a game that uses a lambda function to retrieve images from somewhere. Let’s also consider that the lambda function only allows requests from findme.tinkerantreats.com. In this case, the subdomain is ‘findme’ and the domain is ‘tinkerantreats.com’.

Impossible? Can’t be done? Well, lucky for you, it can! Here’s how:

Map localhost to your domain name

On the terminal, open your local machine’s hosts config file:

<command to open up your text editor> /etc/hosts

My personal preference is Sublime text, so I run subl /etc/hosts. With VS code, this would be code /etc/hosts.

That opens up the host config file that maps names to an IP address (like a mini-DNS). At the bottom of the file add a line that maps the IP address of localhost (127.0.0.1) to the domain you need to use.

/etc/hosts

In the game example, this is 127.0.0.1 findme.tinkerantreats.com. Save the file and enter your password in the pop up that shows. You’re required to enter your password because you’ve just changed a system file! Remember to comment that line out with a hash when you return to ‘normal’ mode!

Modify your run command:

The example app’s build on React and I use yarn as my package manager, with yarn start as the command to start it up. This will still work and serve on localhost:3000. To run the app on the domain, you need to modify the start command slightly (If you use npm, replace ‘yarn’ with ‘npm’ or ‘npm run’.):

sudo yarn start --open --public findme.tinkerantreats.com --port 80

The --public flag tells the React server that we’re listening on this host. This is the host we set up in the /etc/hosts file.The --port 80 tells it to serve on the port 80, which is the normal http port. The sudo (requiring one to enter your password on this command) allows one to use port 80 because any port below 1000 is a system port. The server can now redirect to findme.tinkernatreats.com for local dev.

If this were an Angular app, the command would be slightly different:

sudo ng serve --open --publicHost findme.tinkerantreats.com --port 80

Now we have our local server running on the domain we need but it’s still on http, we haven’t dealt with the ‘s’ bit yet. We need to add an SSL certificate and we’ll do that with one that is self-signed.

Generate a self-signed SSL certificate

Running the command below from the root of the project will generate an SSL certificate and save the cert and key as files within a ssl folder. Be sure to modify the subdomain and domain names to your own before running this yourself!

mkdir ssl
openssl req -x509 -out ssl/findme.tinkerantreats.crt -keyout ssl/findme.tinkerantreats.key -newkey rsa:2048 -nodes -sha256

You’ll be asked a bunch of questions:

The Common Name is where you put your subdomain.domain.

Once complete, if you open up your project you should see another folder called ssl within the project’s root containing a .crt and a .key file. Remember to add the ssl folder to .gitignore !!

Now all that’s left to do is to tell Chrome to trust the cert on a Mac and add the ssl crt and key to our start command. I’m not going to repeat the directions given by Toby Osbourn in this blog post, instead, here’s a visual summary instead:

Trust the SSL certificate

The last thing we need to do is add the ssl to our start command. This now becomes:

sudo yarn start --open --public findme.tinkerantreats.com --port 443 --https --key "ssl/findme.tinkerantreats.key" --cert "ssl/findme.tinkerantreats.crt"

Again, replace ‘yarn’ with ‘npm’ or ‘npm run’ if you need to.

That should now have the app running on https.

If this were an Angular environment, the command would be:

sudo ng serve --open --publicHost findme.tinkerantreats.com --port 443 --ssl 1 --ssl-key "ssl/findme.tinkerantreats.key" --ssl-cert "ssl/findme.tinkerantreats.crt"

And we’re done!