66
77> Features
88
9+ - Up-to-date [ dependencies] ( ./requirements.txt ) : ** Flask 2.0.1**
10+ - [ SCSS compilation] ( #recompile-css ) via ** Gulp**
911- DBMS: SQLite, PostgreSQL (production)
1012- DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
1113- Modular design with ** Blueprints** , simple codebase
@@ -80,28 +82,61 @@ $ # Access the dashboard in browser: http://127.0.0.1:5000/
8082
8183<br />
8284
83- ## Codebase structure
85+ ## Code-base structure
8486
8587The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
8688
87- > Simplified version
88-
8989``` bash
9090< PROJECT ROOT >
9191 |
92- | -- app/ # Implements app logic
93- | | -- base/ # Base Blueprint - handles the authentication
94- | | -- home/ # Home Blueprint - serve UI Kit pages
92+ | -- apps/
93+ | |
94+ | | -- home/ # A simple app that serve HTML files
95+ | | | -- routes.py # Define app routes
96+ | |
97+ | | -- authentication/ # Handles auth routes (login and register)
98+ | | | -- routes.py # Define authentication routes
99+ | | | -- models.py # Defines models
100+ | | | -- forms.py # Define auth forms (login and register)
101+ | |
102+ | | -- static/
103+ | | | -- < css, JS, images> # CSS files, Javascripts files
95104 | |
96- | __init__.py # Initialize the app
105+ | | -- templates/ # Templates used to render pages
106+ | | | -- includes/ # HTML chunks and components
107+ | | | | -- navigation.html # Top menu component
108+ | | | | -- sidebar.html # Sidebar component
109+ | | | | -- footer.html # App Footer
110+ | | | | -- scripts.html # Scripts common to all pages
111+ | | |
112+ | | | -- layouts/ # Master pages
113+ | | | | -- base-fullscreen.html # Used by Authentication pages
114+ | | | | -- base.html # Used by common pages
115+ | | |
116+ | | | -- accounts/ # Authentication pages
117+ | | | | -- login.html # Login page
118+ | | | | -- register.html # Register page
119+ | | |
120+ | | | -- home/ # UI Kit Pages
121+ | | | -- index.html # Index page
122+ | | | -- 404-page.html # 404 page
123+ | | | -- * .html # All other pages
124+ | |
125+ | config.py # Set up the app
126+ | __init__.py # Initialize the app
97127 |
98- | -- requirements.txt # Development modules - SQLite storage
99- | -- requirements-mysql.txt # Production modules - Mysql DMBS
100- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
128+ | -- requirements.txt # Development modules - SQLite storage
129+ | -- requirements-mysql.txt # Production modules - Mysql DMBS
130+ | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
101131 |
102- | -- .env # Inject Configuration via Environment
103- | -- config.py # Set up the app
104- | -- run.py # Start the app - WSGI gateway
132+ | -- Dockerfile # Deployment
133+ | -- docker-compose.yml # Deployment
134+ | -- gunicorn-cfg.py # Deployment
135+ | -- nginx # Deployment
136+ | | -- appseed-app.conf # Deployment
137+ |
138+ | -- .env # Inject Configuration via Environment
139+ | -- run.py # Start the app - WSGI gateway
105140 |
106141 | -- ************************************************************************
107142```
@@ -120,78 +155,47 @@ The project is coded using blueprints, app factory pattern, dual configuration p
120155
121156<br />
122157
123- > App / Base Blueprint
158+ ## Recompile CSS
159+
160+ To recompile SCSS files, follow this setup:
161+
162+ <br />
124163
125- The * Base* blueprint handles the authentication (routes and forms) and assets management. The structure is presented below:
164+ ** Step #1 ** - Install tools
165+
166+ - [ NodeJS] ( https://nodejs.org/en/ ) 12.x or higher
167+ - [ Gulp] ( https://gulpjs.com/ ) - globally
168+ - ` npm install -g gulp-cli `
169+ - [ Yarn] ( https://yarnpkg.com/ ) (optional)
170+
171+ <br />
172+
173+ ** Step #2 ** - Change the working directory to ` assets ` folder
126174
127175``` bash
128- < PROJECT ROOT >
129- |
130- | -- app/
131- | | -- home/ # Home Blueprint - serve app pages (private area)
132- | | -- base/ # Base Blueprint - handles the authentication
133- | | -- static/
134- | | | -- < css, JS, images> # CSS files, Javascripts files
135- | |
136- | | -- templates/ # Templates used to render pages
137- | |
138- | | -- includes/ #
139- | | | -- navigation.html # Top menu component
140- | | | -- sidebar.html # Sidebar component
141- | | | -- footer.html # App Footer
142- | | | -- scripts.html # Scripts common to all pages
143- | |
144- | | -- layouts/ # Master pages
145- | | | -- base-fullscreen.html # Used by Authentication pages
146- | | | -- base.html # Used by common pages
147- | |
148- | | -- accounts/ # Authentication pages
149- | | -- login.html # Login page
150- | | -- register.html # Registration page
151- |
152- | -- requirements.txt # Development modules - SQLite storage
153- | -- requirements-mysql.txt # Production modules - Mysql DMBS
154- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
155- |
156- | -- .env # Inject Configuration via Environment
157- | -- config.py # Set up the app
158- | -- run.py # Start the app - WSGI gateway
159- |
160- | -- ************************************************************************
176+ $ cd apps/static/assets
161177```
162178
163179<br />
164180
165- > App / Home Blueprint
181+ ** Step #3 ** - Install modules (this will create a classic ` node_modules ` directory)
182+
183+ ``` bash
184+ $ npm install
185+ // OR
186+ $ yarn
187+ ```
188+
189+ <br />
166190
167- The * Home * blueprint handles UI Kit pages for authenticated users. This is the private zone of the app - the structure is presented below:
191+ ** Step # 4 ** - Edit & Recompile SCSS files
168192
169193``` bash
170- < PROJECT ROOT >
171- |
172- | -- app/
173- | | -- base/ # Base Blueprint - handles the authentication
174- | | -- home/ # Home Blueprint - serve app pages (private area)
175- | |
176- | | -- templates/ # UI Kit Pages
177- | |
178- | | -- index.html # Default page
179- | | -- page-404.html # Error 404 - mandatory page
180- | | -- page-500.html # Error 500 - mandatory page
181- | | -- page-403.html # Error 403 - mandatory page
182- | | -- * .html # All other HTML pages
183- |
184- | -- requirements.txt # Development modules - SQLite storage
185- | -- requirements-mysql.txt # Production modules - Mysql DMBS
186- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
187- |
188- | -- .env # Inject Configuration via Environment
189- | -- config.py # Set up the app
190- | -- run.py # Start the app - WSGI gateway
191- |
192- | -- ************************************************************************
194+ $ gulp scss
193195```
194196
197+ The generated file is saved in ` static/assets/css ` directory.
198+
195199<br />
196200
197201## Deployment
@@ -218,7 +222,7 @@ $ cd flask-black-dashboard
218222$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d
219223```
220224
221- Visit ` http://localhost:5005 ` in your browser. The app should be up & running.
225+ Visit ` http://localhost:85 ` in your browser. The app should be up & running.
222226
223227<br />
224228
0 commit comments