Merge pull request #10 from mrsan22/update

Update: Upgarded Angular to v9, nginx conf update

CHANGELOG.md

@@ -1,49 +1,66 @@
+## Angular-Flask-Docker v2.0.3 - 04/20/2020
+
+### Improvements:
+
+- Upgraded Angular to v9 (Ivy).
+- Updated Mime type in nginx conf to serve compiled JS files from dist dir.
+
 ## Angular-Flask-Docker v2.0.2 - 04/20/2020
 
 ### Improvements:
-* Upgraded Python packages version.
+
+- Upgraded Python packages version.
 
 ### Bug Fix:
-* Fixed typo in requirements.txt file
 
+- Fixed typo in requirements.txt file
 
 ## Angular-Flask-Docker v2.0.1 - 06/15/2018
+
 ### New Features:
-* Added `Service` based architecture that encapsulates common SQLAlchemy operations and exposes
-API that interacts with the model. This way our `routes` functions becomes more concise and clear
-with just a call to respective Service API. This can be found under `services` directory.
+
+- Added `Service` based architecture that encapsulates common SQLAlchemy operations and exposes
+  API that interacts with the model. This way our `routes` functions becomes more concise and clear
+  with just a call to respective Service API. This can be found under `services` directory.
 
 ### Bug Fix:
-* Added `as_dict` method under models BaseModel class to convert the Model object into dict.
-Fixed `__repr__` for the same.
+
+- Added `as_dict` method under models BaseModel class to convert the Model object into dict.
+  Fixed `__repr__` for the same.
 
 ### Improvements:
-* Created a new `user` blueprint with user related routes and a new user_service file.
+
+- Created a new `user` blueprint with user related routes and a new user_service file.
 
 ## Angular-Flask-Docker v2.0.0 - 06/08/2018
+
 ### New Features:
 
-* Added `Blueprint` support for handling api routes.
-* Added `application factory` pattern to create Flask app.
-* Added `UnitTests` support to the seed project with few sample tests.
-* Usage of `.env` to set the environment variables.
-* Added sample code on Client side (Angular) to get the data from Flask backend.
+- Added `Blueprint` support for handling api routes.
+- Added `application factory` pattern to create Flask app.
+- Added `UnitTests` support to the seed project with few sample tests.
+- Usage of `.env` to set the environment variables.
+- Added sample code on Client side (Angular) to get the data from Flask backend.
 
 ### Improvements:
-* Improved server side application structure to support different environment configs and large
-scale application structure.
-* Complete `PostgreSQL` database support with sample table, db model and dummy data. An `init.sql`
-script to create a db on container initialization.
+
+- Improved server side application structure to support different environment configs and large
+  scale application structure.
+- Complete `PostgreSQL` database support with sample table, db model and dummy data. An `init.sql`
+  script to create a db on container initialization.
 
 ## Angular-Flask-Docker v1.0.1 - 06/02/2018
 
 ### New Features:
-* Added `PostgreSQL` database support to the seed project.
+
+- Added `PostgreSQL` database support to the seed project.
 
 ### Improvements:
-* Updated Angular and RxJs to v6.
+
+- Updated Angular and RxJs to v6.
 
 ## Angular-Flask-Docker v1.0.0 - 09/07/2017
 
 ### New Features:
-* Released Angular, Flask and Docker Skeleton project.
+
+- Released Angular, Flask and Docker Skeleton project.

README.md

@@ -1,129 +1,145 @@
-# Angular-Flask-Docker-Skeleton v2.0.2
+# Angular-Flask-Docker-Skeleton v2.0.3
+
 ### Simple Angular-Flask-PostgreSQL seed project with Docker.
 
 This is a simple Angular-Flask web application skeleton project with following key
 features:
-* The project structure supports multiple development environments with the usage of `.env`
-variable and `docker.compose.yml` files.
-* Designed for organizing large scale application structure. With the usage of `Blueprints`,
-`application factory` and different configs, you can easily extend this seed project to any
-Production ready application.
-* `Service` Class that encapsulates common SQLAlchemy operations to interact with data model by
-exposing APIs.
-* Support Flask code Testing out of the box. For commands to test, see below.
-* Complete `PostgreSQL` database support with sample db, model and dummy data examples included in
-the project.
-* Reverse proxy using `nginx`.
+
+- The project structure supports multiple development environments with the usage of `.env`
+  variable and `docker.compose.yml` files.
+- Designed for organizing large scale application structure. With the usage of `Blueprints`,
+  `application factory` and different configs, you can easily extend this seed project to any
+  Production ready application.
+- `Service` Class that encapsulates common SQLAlchemy operations to interact with data model by
+  exposing APIs.
+- Support Flask code Testing out of the box. For commands to test, see below.
+- Complete `PostgreSQL` database support with sample db, model and dummy data examples included in
+  the project.
+- Reverse proxy using `nginx`.
 
 It is built with following components:
-* Angular (v6) - Frontend framework.
-* Flask(1.1.2) - Micro web framework (Python-3.6.2) for the backend.
-* PostgreSQL - Database support.
-* Flask-SQLAlchemy - Flask based ORM wrapper on SQLAlchemy.
-* 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.
+
+- Angular (v9) - Frontend framework.
+- Flask(1.1.2) - Micro web framework (Python-3.6.2) for the backend.
+- PostgreSQL - Database support.
+- Flask-SQLAlchemy - Flask based ORM wrapper on SQLAlchemy.
+- 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: I have tagged this project at each release. So please refer to previous tags if you
- are looking for a simpler version of this seed project. For e.g., 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. Also refer [Changelog](https://github.com/mrsan22/Angular-Flask-Docker-Skeleton/blob/master/CHANGELOG.md) file for latest changes.
+> are looking for a simpler version of this seed project. For e.g., 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. Also refer [Changelog](https://github.com/mrsan22/Angular-Flask-Docker-Skeleton/blob/master/CHANGELOG.md) file for latest changes.
 
 ## Project Components (Directory Structure)
 
 ### client
+
 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. It also contains `init.sql`
 script to create a sample database when postres docker container initializes.
 
 ### server
+
 This directory contains the server side code. It hosts the **Flask** app, **tests** setup and
 other configs and settings files required by the backend. It also has Dockerfile for running the
 flask container. This container hosts the backend code.
 
 ### Environment variable
+
 A simple `.env` file to set the environment variables for Flask and Postgres. We can have multiple
 versions of this file for different environments.
 
 ### docker-compose.yml
+
 This file is used by the Docker to create the containers and run your app. We can have multiple
 versions of this file for different environments.
 
 ## Architecture
+
 For this seed project, I am using 3 Docker containers:
-* NGINX - Web Server
-* FLASK - Flask web application with *uwsgi* server.
-* PostgreSQL - Database.
+
+- NGINX - Web Server
+- FLASK - Flask web application with _uwsgi_ server.
+- PostgreSQL - Database.
 
 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.
+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*
+
+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
+
 ![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. Check Angular
+
+**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
-* **Not Required** - Navigate to client directory and execute `ng build --prod` to create production build for Angular.
-* Then navigate back and execute following commands:
-  * `docker-compose build`
-  * `docker-compose up`
-  * *OR* just run one command: `docker-compose -f docker-compose.yml up --build`
- * Open Browser and type following URL:
-  * `localhost` - It should display the Welcome message from Angular and a default message from
+
+- Clone this repository
+- **Not Required** - Navigate to client directory and execute `ng build --prod` to create production build for Angular.
+- Then navigate back and execute following commands:
+  - `docker-compose build`
+  - `docker-compose up`
+  - _OR_ just run one command: `docker-compose -f docker-compose.yml up --build`
+- Open Browser and type following URL:
+- `localhost` - It should display the Welcome message from Angular and a default message from
   backend.
-  * `localhost/api` - It should display welcome message from Flask.
-  * `localhost/api/ping` - To get a `json` from Flask.
-  * `http://localhost/api/users` - Fetches all users from `users` table.
+- `localhost/api` - It should display welcome message from Flask.
+- `localhost/api/ping` - To get a `json` from Flask.
+- `http://localhost/api/users` - Fetches all users from `users` table.
 
 This seed project is good for starting up with any Angular-Flask-Docker project, so check it out and feel free to fork, update, plug in your project etc. Let me know if you find any issues.
 
 ## Working with PostgreSQL
 
-* Check to see if `postgres` is running on port `5432`:
-    * Run: `nc -zv localhost 5432`
-    * Correct Output: `Connection to localhost port 5432 [tcp/postgresql] succeeded!`
-    * If you see above output, everything is good
-* To log into the container running Postgres:
-    * check docker running processes: `docker ps -a`
-    * Find out the **container_id** of the Postgres database and run: `docker exec -it
-    <container_id> bash`
-    * You should now be in postgres docker container terminal:
-    * Open PostgreSQL command line by running `psql -U <database_username>`.
-        * For this project, run: `psql -U postgres`
-    ```
-      root@0dffa1473a46:/# psql -U postgres
-      psql (9.6.9)
-      Type "help" for help.
-      postgres=#
-   ```
-    * `\l` - show all databases
-    *  `\c users_dev` - connect to `users_dev` database.
-    * `\dt` - shows list of tables in the selected database
-    * check data: `SELECT * FROM users;`
+- Check to see if `postgres` is running on port `5432`:
+  - Run: `nc -zv localhost 5432`
+  - Correct Output: `Connection to localhost port 5432 [tcp/postgresql] succeeded!`
+  - If you see above output, everything is good
+- To log into the container running Postgres:
+  - check docker running processes: `docker ps -a`
+  - Find out the **container_id** of the Postgres database and run: `docker exec -it <container_id> bash`
+  - You should now be in postgres docker container terminal:
+  - Open PostgreSQL command line by running `psql -U <database_username>`.
+    - For this project, run: `psql -U postgres`
+  ```
+    root@0dffa1473a46:/# psql -U postgres
+    psql (9.6.9)
+    Type "help" for help.
+    postgres=#
+  ```
+  - `\l` - show all databases
+  - `\c users_dev` - connect to `users_dev` database.
+  - `\dt` - shows list of tables in the selected database
+  - check data: `SELECT * FROM users;`
 
 ## Running Python Tests:
-* All Flask/Python unit tests resides inside the `server/tests` directory and managed by `manage
-.py` Python file.
-* Run the sample tests using following command:
-    * `docker-compose -f docker-compose.yml run --rm flask_demo python manage.py test`
+
+- All Flask/Python unit tests resides inside the `server/tests` directory and managed by `manage .py` Python file.
+- Run the sample tests using following command:
+  - `docker-compose -f docker-compose.yml run --rm flask_demo python manage.py test`
 
 ### References/Credits
+
 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/)
+
+- [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/README.md

@@ -1,6 +1,6 @@
-# AngularSeed
+# AngularFlaskDockerSeed v2.0.3
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.1.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.
 
 ## Development server
 

client/angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -27,6 +28,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -123,7 +130,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "style": "css"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

client/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.