|
|
@@ -6,6 +6,8 @@
|
|
|
|
|
|
> Features
|
|
|
|
|
|
+- Up-to-date [dependencies](./requirements.txt): **Flask 2.0.1**
|
|
|
+- [SCSS compilation](#recompile-css) via **Gulp**
|
|
|
- DBMS: SQLite, PostgreSQL (production)
|
|
|
- DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
|
|
|
- Modular design with **Blueprints**, simple codebase
|
|
|
@@ -80,28 +82,61 @@ $ # Access the dashboard in browser: http://127.0.0.1:5000/
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-## Codebase structure
|
|
|
+## Code-base structure
|
|
|
|
|
|
The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
|
|
|
|
|
|
-> Simplified version
|
|
|
-
|
|
|
```bash
|
|
|
< PROJECT ROOT >
|
|
|
|
|
|
|
- |-- app/ # Implements app logic
|
|
|
- | |-- base/ # Base Blueprint - handles the authentication
|
|
|
- | |-- home/ # Home Blueprint - serve UI Kit pages
|
|
|
+ |-- apps/
|
|
|
+ | |
|
|
|
+ | |-- home/ # A simple app that serve HTML files
|
|
|
+ | | |-- routes.py # Define app routes
|
|
|
+ | |
|
|
|
+ | |-- authentication/ # Handles auth routes (login and register)
|
|
|
+ | | |-- routes.py # Define authentication routes
|
|
|
+ | | |-- models.py # Defines models
|
|
|
+ | | |-- forms.py # Define auth forms (login and register)
|
|
|
+ | |
|
|
|
+ | |-- static/
|
|
|
+ | | |-- <css, JS, images> # CSS files, Javascripts files
|
|
|
| |
|
|
|
- | __init__.py # Initialize the app
|
|
|
+ | |-- templates/ # Templates used to render pages
|
|
|
+ | | |-- includes/ # HTML chunks and components
|
|
|
+ | | | |-- navigation.html # Top menu component
|
|
|
+ | | | |-- sidebar.html # Sidebar component
|
|
|
+ | | | |-- footer.html # App Footer
|
|
|
+ | | | |-- scripts.html # Scripts common to all pages
|
|
|
+ | | |
|
|
|
+ | | |-- layouts/ # Master pages
|
|
|
+ | | | |-- base-fullscreen.html # Used by Authentication pages
|
|
|
+ | | | |-- base.html # Used by common pages
|
|
|
+ | | |
|
|
|
+ | | |-- accounts/ # Authentication pages
|
|
|
+ | | | |-- login.html # Login page
|
|
|
+ | | | |-- register.html # Register page
|
|
|
+ | | |
|
|
|
+ | | |-- home/ # UI Kit Pages
|
|
|
+ | | |-- index.html # Index page
|
|
|
+ | | |-- 404-page.html # 404 page
|
|
|
+ | | |-- *.html # All other pages
|
|
|
+ | |
|
|
|
+ | config.py # Set up the app
|
|
|
+ | __init__.py # Initialize the app
|
|
|
|
|
|
|
- |-- requirements.txt # Development modules - SQLite storage
|
|
|
- |-- requirements-mysql.txt # Production modules - Mysql DMBS
|
|
|
- |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
|
|
+ |-- requirements.txt # Development modules - SQLite storage
|
|
|
+ |-- requirements-mysql.txt # Production modules - Mysql DMBS
|
|
|
+ |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
|
|
|
|
|
|
- |-- .env # Inject Configuration via Environment
|
|
|
- |-- config.py # Set up the app
|
|
|
- |-- run.py # Start the app - WSGI gateway
|
|
|
+ |-- Dockerfile # Deployment
|
|
|
+ |-- docker-compose.yml # Deployment
|
|
|
+ |-- gunicorn-cfg.py # Deployment
|
|
|
+ |-- nginx # Deployment
|
|
|
+ | |-- appseed-app.conf # Deployment
|
|
|
+ |
|
|
|
+ |-- .env # Inject Configuration via Environment
|
|
|
+ |-- run.py # Start the app - WSGI gateway
|
|
|
|
|
|
|
|-- ************************************************************************
|
|
|
```
|
|
|
@@ -120,78 +155,47 @@ The project is coded using blueprints, app factory pattern, dual configuration p
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-> App / Base Blueprint
|
|
|
+## Recompile CSS
|
|
|
+
|
|
|
+To recompile SCSS files, follow this setup:
|
|
|
+
|
|
|
+<br />
|
|
|
|
|
|
-The *Base* blueprint handles the authentication (routes and forms) and assets management. The structure is presented below:
|
|
|
+**Step #1** - Install tools
|
|
|
+
|
|
|
+- [NodeJS](https://nodejs.org/en/) 12.x or higher
|
|
|
+- [Gulp](https://gulpjs.com/) - globally
|
|
|
+ - `npm install -g gulp-cli`
|
|
|
+- [Yarn](https://yarnpkg.com/) (optional)
|
|
|
+
|
|
|
+<br />
|
|
|
+
|
|
|
+**Step #2** - Change the working directory to `assets` folder
|
|
|
|
|
|
```bash
|
|
|
-< PROJECT ROOT >
|
|
|
- |
|
|
|
- |-- app/
|
|
|
- | |-- home/ # Home Blueprint - serve app pages (private area)
|
|
|
- | |-- base/ # Base Blueprint - handles the authentication
|
|
|
- | |-- static/
|
|
|
- | | |-- <css, JS, images> # CSS files, Javascripts files
|
|
|
- | |
|
|
|
- | |-- templates/ # Templates used to render pages
|
|
|
- | |
|
|
|
- | |-- includes/ #
|
|
|
- | | |-- navigation.html # Top menu component
|
|
|
- | | |-- sidebar.html # Sidebar component
|
|
|
- | | |-- footer.html # App Footer
|
|
|
- | | |-- scripts.html # Scripts common to all pages
|
|
|
- | |
|
|
|
- | |-- layouts/ # Master pages
|
|
|
- | | |-- base-fullscreen.html # Used by Authentication pages
|
|
|
- | | |-- base.html # Used by common pages
|
|
|
- | |
|
|
|
- | |-- accounts/ # Authentication pages
|
|
|
- | |-- login.html # Login page
|
|
|
- | |-- register.html # Registration page
|
|
|
- |
|
|
|
- |-- requirements.txt # Development modules - SQLite storage
|
|
|
- |-- requirements-mysql.txt # Production modules - Mysql DMBS
|
|
|
- |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
|
|
- |
|
|
|
- |-- .env # Inject Configuration via Environment
|
|
|
- |-- config.py # Set up the app
|
|
|
- |-- run.py # Start the app - WSGI gateway
|
|
|
- |
|
|
|
- |-- ************************************************************************
|
|
|
+$ cd apps/static/assets
|
|
|
```
|
|
|
|
|
|
<br />
|
|
|
|
|
|
-> App / Home Blueprint
|
|
|
+**Step #3** - Install modules (this will create a classic `node_modules` directory)
|
|
|
+
|
|
|
+```bash
|
|
|
+$ npm install
|
|
|
+// OR
|
|
|
+$ yarn
|
|
|
+```
|
|
|
+
|
|
|
+<br />
|
|
|
|
|
|
-The *Home* blueprint handles UI Kit pages for authenticated users. This is the private zone of the app - the structure is presented below:
|
|
|
+**Step #4** - Edit & Recompile SCSS files
|
|
|
|
|
|
```bash
|
|
|
-< PROJECT ROOT >
|
|
|
- |
|
|
|
- |-- app/
|
|
|
- | |-- base/ # Base Blueprint - handles the authentication
|
|
|
- | |-- home/ # Home Blueprint - serve app pages (private area)
|
|
|
- | |
|
|
|
- | |-- templates/ # UI Kit Pages
|
|
|
- | |
|
|
|
- | |-- index.html # Default page
|
|
|
- | |-- page-404.html # Error 404 - mandatory page
|
|
|
- | |-- page-500.html # Error 500 - mandatory page
|
|
|
- | |-- page-403.html # Error 403 - mandatory page
|
|
|
- | |-- *.html # All other HTML pages
|
|
|
- |
|
|
|
- |-- requirements.txt # Development modules - SQLite storage
|
|
|
- |-- requirements-mysql.txt # Production modules - Mysql DMBS
|
|
|
- |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS
|
|
|
- |
|
|
|
- |-- .env # Inject Configuration via Environment
|
|
|
- |-- config.py # Set up the app
|
|
|
- |-- run.py # Start the app - WSGI gateway
|
|
|
- |
|
|
|
- |-- ************************************************************************
|
|
|
+$ gulp scss
|
|
|
```
|
|
|
|
|
|
+The generated file is saved in `static/assets/css` directory.
|
|
|
+
|
|
|
<br />
|
|
|
|
|
|
## Deployment
|
|
|
@@ -218,7 +222,7 @@ $ cd flask-black-dashboard
|
|
|
$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
|
|
|
```
|
|
|
|
|
|
-Visit `http://localhost:5005` in your browser. The app should be up & running.
|
|
|
+Visit `http://localhost:85` in your browser. The app should be up & running.
|
|
|
|
|
|
<br />
|
|
|
|
App Generator