Skip to content

Commit

Permalink
Merge pull request #7 from mrsan22/dev
Browse files Browse the repository at this point in the history
Fixed typo in requirements.txt, Fixes issue #6, upgraded package, changes for releasing v2.0.2
  • Loading branch information
mrsan22 authored Apr 21, 2020
2 parents 4a4eb17 + 3236059 commit 2ba7d15
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 6,569 deletions.
21 changes: 15 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
## Angular-Flask-Docker v2.0.2 - 04/20/2020

### Improvements:
* Upgraded Python packages version.

### Bug Fix:
* 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
* 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.
* 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:
Expand All @@ -21,16 +30,16 @@ Fixed `__repr__` for the same.
* 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
* 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`
* 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.

### Improvements:
* Updated Angular and RxJs to v6.

Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2017 Sanjiv Kumar
Copyright (c) 2020 Sanjiv Kumar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
64 changes: 32 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
# Angular-Flask-Docker-Skeleton v2.0.1
# Angular-Flask-Docker-Skeleton v2.0.2
### Simple Angular-Flask-PostgreSQL seed project with Docker.

This is a simple Angular-Flask web application skeleton project with following key
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
* 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
* `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
* Complete `PostgreSQL` database support with sample db, model and dummy data examples included in
the project.
* Reverse proxy using `nginx`.
* Reverse proxy using `nginx`.

It is built with following components:
* Angular (v6) - Frontend framework.
* Flask(1.0.2) - Micro web framework (Python-3.6.2) for the backend.
* PostgreSQL - Database support.
* 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
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)
Expand All @@ -38,20 +38,20 @@ This directory holds the Angular code.
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`
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
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
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
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
Expand All @@ -60,23 +60,23 @@ For this seed project, I am using 3 Docker containers:
* FLASK - Flask web application with *uwsgi* server.
* PostgreSQL - Database.

The three components are all created from Docker images that expand on the respective official
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 Flask container
talks to the PostgreSQL database on port 5432 for any request that require database operations.
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.
Expand All @@ -85,8 +85,8 @@ Prerequisites [here](https://github.com/angular/angular-cli#prerequisites).
* `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` - 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.
Expand All @@ -101,16 +101,16 @@ This seed project is good for starting up with any Angular-Flask-Docker project,
* 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
* 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>`.
* 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=#
postgres=#
```
* `\l` - show all databases
* `\c users_dev` - connect to `users_dev` database.
Expand Down
Loading

0 comments on commit 2ba7d15

Please sign in to comment.