ngx-starter

This project was generated with Angular CLI. It provides a foundation on which to build custom applications that share common features and functionality. Towards this goal, it provides common and reusable utilities. In addition, it provices a reference application that demonstrates conventions and best practices.

This application tries to adhere to the Angular Style Guide. The basic project structure is established by Angular CLI. This documentation will only discuss aspects that are unique to it.

Development

NPM Scripts

This starter application provides a number of NPM tools for ease of development. Following sections go into further detail on some of these scripts:

Running the Development Server

npm start starts the development server.

This command will start the Angular.io application running in development mode. It will run ng serve --proxy-config proxy.conf.json.

Running the Development Server in Production Mode

npm run start:prod will run the development server in production mode. This will run ng serve --proxy-config proxy.conf.json --prod.

Tests

Running unit tests

Run ng test to execute the unit tests via Karma.

Proxy Config

When running the development server, all requests to api/* are proxied to localhost:3000.

Proxy Config with PKI

To configure the development server for PKI mode, you can proxy the back-end requests through nginx.

To do this, configure nginx to listen on port 3000 and proxy requests through to your REST API.

You can configure nginx to hardcode append the X-SSL-Client-S-DN header for all requests so you don't actually have to use PKI in the browser. For example, the value of this header is configurable through the proxyPkiPrimaryUserHeader property in the Node REST Starter API.

# Cluster Definition
upstream app_cluster {
        ip_hash;
        server localhost:3000 fail_timeout=10s max_fails=0;
}

# Server Definition
server {

        listen 3001;
        server_name  localhost;

        # Server-specific access log
        access_log  /usr/local/var/log/nginx/ngx-starter.access.log  fmt_access;

        client_max_body_size 0;
        client_body_buffer_size 500M;

        # Forwarding all locations to the destination
        location / {

                # Set a header with the client DN
                proxy_set_header X-SSL-Client-S-DN 'reblace';
                proxy_set_header verify true;

                # Set the client's IP and Forwarded-For chain
                proxy_set_header Host                   $host;
                proxy_set_header X-Real-IP              $remote_addr;
                proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;

                # Forward traffic to the destination
                proxy_pass http://app_cluster;
                proxy_redirect off;
                proxy_buffering off;

                # Http upgrade settings for websockets
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";

                # Proxy settings for applications
                proxy_set_header X-ProxyScheme $scheme;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-ProxyHost $host;
                proxy_set_header X-ProxyPort  443;
                proxy_set_header X-ProxyContextPath "";
        }
}

Deployment

Build

npm run build builds the project and outputs artifacts to ./dist.

Project Layout and Conventions

Core, Common, Site

Styles

Authentication

Pki Mode vs Login Mode

Cookie-based Sessions

HTTPInterceptors and AuthGuards

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.