Use private domains with ssl certificates instead of localhost:port

If you develop several projects you should consider to use private domains, e.g. https://foo.local , instead of e.g. http://localhost:12345.

---

Why?

• Obviously: you don't have to remember ports.
• Passwords: as you don't mess with ports, your dev passwords always stick to specific domains and is much better to manage them in password manager.
• Bookmarks: if you save links to fast-access them on your needs, you have much better meaningful links.
• Further more: by separation naming and deployment you are on a good way, therefor you may find other useful cases in your dev env.
• Certificates: you can setup this also with localhost, but anyways this step is a must, as many of browser features are HTTPS-only, like: WebRTC, Geolocation, Service Worker.

Is cross-platform: window, linux, mac. But was tested on windows. Required preinstalls: node, openssl, nginx.

On windows I would suggest to use https://community.chocolatey.org/packages to install all this dependencies.

---

1. Hosts

To make it simple, use npm:hostile

# install globally 
npm i hostile -g
# define your custom private domain
hostile set 127.0.0.1 foo.local

# view list
hostile list

---

2. Self-signed certificate

2.1 Create a certificate authority. This could be one time action - for any further domains it can be reused

# Generate private key
openssl genrsa -des3 -out myCA.key 2048
# Generate root certificate
openssl req -x509 -new -nodes -key myCA.key -sha256 -days 825 -out myCA.pem

2.2 Create a certificate for the domain.

Create a configuration file foo.local.ext

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = foo.local

Now you can create the cert using certificate authority keys:

# Generate a private key
openssl genrsa -out foo.local.key 2048
# Create a certificate-signing request
openssl req -new -key foo.local.key -out foo.local.csr
# Create the signed certificate
openssl x509 -req -in foo.local.csr -CA myCA.pem -CAkey myCA.key -CAcreateserial -out foo.local.crt -days 825 -sha256 -extfile foo.local.ext

---

3. Install self-signed certificate

You can use Chrome to install those certificates, go to: chrome://settings/security

1. Import foo.local.crt to the Trusted Root Certification.
2. Import myCA.pem to the Trusted Publishers, if not already done

---

4. Nginx

Locate the configuration file, and add reverse proxy to your localhost development instance.

server {
    listen 443 ssl;
    server_name  foo.local;

    ssl_certificate      /path/to/foo.local.crt;
    ssl_certificate_key  /path/to/foo.local.key;

    location / {
        proxy_pass       http://localhost:5003;
        proxy_set_header Host $host;
    }
}
server {
    listen 80;
    server_name  foo.local;
    return 301 https://foo.local;
}

This also forces redirects to https.

---

Looking forward to improve:

It would be nice to have a tool which can automate all this steps and display better overview of already created projects. Also I would wish this tool to be able to launch my development environment for a project.