reverse-proxy-schematic

reverse-proxy-schematic

Angular schematic for a development SSL wildcard reverse-proxy

What is it for?

It will allow you to serve http://localhost:4200 from a secured local domain like https://example.localhost. You can also add subdomains such that http://localhost:4201 will be served from https://subdomain.example.localhost.

Installation

• Download the source code to /path/to/reverse-proxy-schematic
• Go to your workspace and:

npm link /path/to/reverse-proxy-schematic
ng g /path/to/reverse-proxy-schematic/src/collection.json:proxy --hostname="example.localhost" --apiPort="5000" --apiRoute="api"

The apiPort and apiRoute args are optional and default to 5000 and api, respectively. If using cloud functions for the backend, you can provide the locally served URL (ex: 5000/example-com/us-central1) to the apiPort.

This schematic adds

• a proxy folder to the root of your workspace
• generate.proxy.cert and proxy scripts to package.json

What you need to setup

• update contents of proxy/cert/proxy.csr.cnf (change [COUNTRY CODE] to US and so on)
• run npm run generate.proxy.cert
• add /proxy/cert/ssl/rootCA.pem to your browser's Trusted Root Certification Authorities
• add the hostname domain and any subdomains to your local hosts file
• add custom scripts to package.json to serve each app via proxy (script name must start with start.):

  scripts: {
    //
    "start.app1": "ng serve --project=app1 --host=example.localhost --port=4200",
    "start.app2": "ng serve --project=app2 --host=subdomain.example.localhost --port=4201"
  }

Then npm run proxy (or npm run proxy -- -s), npm run start.app1, npm run start.app2 and open https://example.localhost