# 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](http://npmjs.com/package/hostile)

```bash
# 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_

```bash
# 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`

```ini
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:

```bash
# 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.

```nginx
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.