Updates

.gitignore

@@ -1,3 +1,4 @@
 .idea
 client/node_modules
-client/dist
+client/dist
+postgresql/Dockerfile

CHANGELOG.md

@@ -0,0 +1,12 @@
+##Angular-Flask-Docker v1.0.1 - 02/06/2018
+
+### New Features:
+* Added `PostgreSQL` database support to the seed project.
+
+### Improvements:
+* Updated Angular and RxJs to v6.
+
+##Angular-Flask-Docker v1.0.0 - 09/07/2017
+
+### New Features:
+* Released Angular, Flask and Docker Skeleton project.

README.md

@@ -1,34 +1,58 @@
-# Angular-Flask-Docker-Skeleton
+# Angular-Flask-Docker-Skeleton v1.0.1
 Simple Angular-Flask seed project with Docker.
 
 This is the simple Angular-Flask web application skeleton. It is built with following components:
-* Angular (4.2) - Frontend framework.
-* Flask - Micro web framework (Python-3.6.2) for the backend.
+* Angular (v6) - Frontend framework.
+* Flask(latest version) - Micro web framework (Python-3.6.2) for the backend.
+* PostgreSQL - Database support. 
 * nginx - web server (It's also used for reverse proxy). External user hits the nginx which distributes the request between Frontend and Backend using url.
 * uwsgi - It's a WSGI server that help running web application written in Python. It comes with direct support for popular NGINX web server.
 * Docker - Usage of Docker Compose to build and host the application.
+
+> NOTE: If you want to use the seed project without database support please refer to [v1.0.0](https://github.com/mrsan22/Angular-Flask-Docker-Skeleton/tree/v1.0.0) of 
+the project under tags.
+
 ## Project Components (Directory Structure)
+
 ### client
-This directory holds the Angular(4.2) code.
+This directory holds the Angular code.
+
 ### nginx
 This directory holds the nginx config file and Dockerfile for running the nginx container. This container serves the Angular code and also passes request to backend.
+
+### postgresql
+This directory holds the Dockerfile for running PostgreSQL database.
+
 ### server
 This directory contains the server side code. It hosts the simple *Flask* app and *uswgi* file. It also has Dockerfile for running the flask container. This container hosts the backend code.
+
 ### docker-compose.yml
 This file is used by the Docker to create the containers and run your app.
 
 ## Architecture
-For this seed project, I am using 2 Docker containers:
+For this seed project, I am using 3 Docker containers:
 * NGINX - Web Server
 * FLASK - Flask web application with *uwsgi* server.
+* PostgreSQL - Database.
 
-The two components are all created from Docker images that expand on the respective official images from Docker Hub. Each of these images are built using separate Dockerfiles. Docker Compose is then used to create all two containers and connect them correctly into a unified application.
+The three components are all created from Docker images that expand on the respective official 
+images from Docker Hub. Each of these images are built using separate Dockerfiles. Docker Compose
+ is then used to create all three containers and connect them correctly into a unified application.
+
 ### Working
-The request from an external user hits the *nginx* web server on port 80. Depending on the __URL__,the request is served using Angular code or it is sent to Flask web application. In this app, all request URL starting with */api* is sent to Flask web service. The Flask docker container is also running and it exposes port 5000. These setting are defined in *nginx.conf* file. In this way, nginx is aware of both Frontend and Backend services.
+The request from an external user hits the *nginx* web server on port 80. Depending on the 
+__URL__,the request is served using Angular code or it is sent to Flask web application. In this 
+app, all request URL starting with */api* is sent to Flask web service. The Flask docker 
+container is also running and it exposes port 5000. These setting are defined in *nginx.conf* 
+file. In this way, nginx is aware of both Frontend and Backend services. The Flask container 
+talks to the PostgreSQL database on port 5432 for any request that require database operations. 
+
 ### Basic Architecture Diagram
-![alt text](https://github.com/mrsan22/Angular-Flask-Docker-Skeleton/blob/master/architecture.png)
+![project architecture](https://github.com/mrsan22/Angular-Flask-Docker-Skeleton/blob/master/project_architecture.png)
+
 ## Usage
-__NOTE__: Make sure you have Docker, node, npm and angular-cli installed.
+__NOTE__: Make sure you have Docker, node, npm and angular-cli installed. Check Angular 
+Prerequisites [here](https://github.com/angular/angular-cli#prerequisites).
 * Clone this repository
 * Navigate to client directory and execute `ng build --prod` to create production build for Angular.
 * Then navigate back and execute following commands:
@@ -44,4 +68,3 @@ This seed project is good for starting up with any Angular-Flask-Docker project,
 I refered a lot of online blogs, github repos and stackoverflow questions, while I was working on to create this project. A big Thank You to all these people who take time from their regular work and write Blog, answers questions and post their code online, so that someone like me could learn from those posts and come up with something of their own. Special mention for these blog posts.
 * [Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-serve-flask-applications-with-uwsgi-and-nginx-on-ubuntu-14-04)
 * [Patrick Software Blog](http://www.patricksoftwareblog.com/how-to-use-docker-and-docker-compose-to-create-a-flask-application/)
-

client/angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-seed": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-seed:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-seed:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-seed:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular-seed-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "angular-seed:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-seed",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

client/karma.conf.js

@@ -4,19 +4,19 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {