@@ -4,6 +4,8 @@ Admin dashboard generated by AppSeed in **Flask** Framework. Designed for those
4
4
5
5
<br />
6
6
7
+ - Up-to-date [ dependencies] ( ./requirements.txt ) : ** Flask 2.0.1**
8
+ - [ SCSS compilation] ( #recompile-css ) via ** Gulp**
7
9
- UI Kit: ** [ Soft UI Dashboard] ( https://bit.ly/2Q1uIfK ) ** (Free Version) provided by ** Creative-Tim**
8
10
- DBMS: SQLite, PostgreSQL (production)
9
11
- DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
@@ -73,24 +75,57 @@ $ # Access the dashboard in browser: http://127.0.0.1:5000/
73
75
74
76
The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
75
77
76
- > Simplified version
77
-
78
78
``` bash
79
79
< PROJECT ROOT >
80
80
|
81
- | -- app/ # Implements app logic
82
- | | -- base/ # Base Blueprint - handles the authentication
83
- | | -- home/ # Home Blueprint - serve UI Kit pages
81
+ | -- apps/
82
+ | |
83
+ | | -- home/ # A simple app that serve HTML files
84
+ | | | -- routes.py # Define app routes
85
+ | |
86
+ | | -- authentication/ # Handles auth routes (login and register)
87
+ | | | -- routes.py # Define authentication routes
88
+ | | | -- models.py # Defines models
89
+ | | | -- forms.py # Define auth forms (login and register)
90
+ | |
91
+ | | -- static/
92
+ | | | -- < css, JS, images> # CSS files, Javascripts files
84
93
| |
85
- | __init__.py # Initialize the app
94
+ | | -- templates/ # Templates used to render pages
95
+ | | | -- includes/ # HTML chunks and components
96
+ | | | | -- navigation.html # Top menu component
97
+ | | | | -- sidebar.html # Sidebar component
98
+ | | | | -- footer.html # App Footer
99
+ | | | | -- scripts.html # Scripts common to all pages
100
+ | | |
101
+ | | | -- layouts/ # Master pages
102
+ | | | | -- base-fullscreen.html # Used by Authentication pages
103
+ | | | | -- base.html # Used by common pages
104
+ | | |
105
+ | | | -- accounts/ # Authentication pages
106
+ | | | | -- login.html # Login page
107
+ | | | | -- register.html # Register page
108
+ | | |
109
+ | | | -- home/ # UI Kit Pages
110
+ | | | -- index.html # Index page
111
+ | | | -- 404-page.html # 404 page
112
+ | | | -- * .html # All other pages
113
+ | |
114
+ | config.py # Set up the app
115
+ | __init__.py # Initialize the app
86
116
|
87
- | -- requirements.txt # Development modules - SQLite storage
88
- | -- requirements-mysql.txt # Production modules - Mysql DMBS
89
- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
117
+ | -- requirements.txt # Development modules - SQLite storage
118
+ | -- requirements-mysql.txt # Production modules - Mysql DMBS
119
+ | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
90
120
|
91
- | -- .env # Inject Configuration via Environment
92
- | -- config.py # Set up the app
93
- | -- run.py # Start the app - WSGI gateway
121
+ | -- Dockerfile # Deployment
122
+ | -- docker-compose.yml # Deployment
123
+ | -- gunicorn-cfg.py # Deployment
124
+ | -- nginx # Deployment
125
+ | | -- appseed-app.conf # Deployment
126
+ |
127
+ | -- .env # Inject Configuration via Environment
128
+ | -- run.py # Start the app - WSGI gateway
94
129
|
95
130
| -- ************************************************************************
96
131
```
@@ -109,80 +144,49 @@ The project is coded using blueprints, app factory pattern, dual configuration p
109
144
110
145
<br />
111
146
112
- > App / Base Blueprint
147
+ ## Recompile CSS
148
+
149
+ To recompile SCSS files, follow this setup:
150
+
151
+ <br />
152
+
153
+ ** Step #1 ** - Install tools
154
+
155
+ - [ NodeJS] ( https://nodejs.org/en/ ) 12.x or higher
156
+ - [ Gulp] ( https://gulpjs.com/ ) - globally
157
+ - ` npm install -g gulp-cli `
158
+ - [ Yarn] ( https://yarnpkg.com/ ) (optional)
159
+
160
+ <br />
113
161
114
- The * Base * blueprint handles the authentication (routes and forms) and assets management. The structure is presented below:
162
+ ** Step # 2 ** - Change the working directory to ` assets ` folder
115
163
116
164
``` bash
117
- < PROJECT ROOT >
118
- |
119
- | -- app/
120
- | | -- home/ # Home Blueprint - serve app pages (private area)
121
- | | -- base/ # Base Blueprint - handles the authentication
122
- | | -- static/
123
- | | | -- < css, JS, images> # CSS files, Javascripts files
124
- | |
125
- | | -- templates/ # Templates used to render pages
126
- | |
127
- | | -- includes/ #
128
- | | | -- navigation.html # Top menu component
129
- | | | -- sidebar.html # Sidebar component
130
- | | | -- footer.html # App Footer
131
- | | | -- scripts.html # Scripts common to all pages
132
- | |
133
- | | -- layouts/ # Master pages
134
- | | | -- base-fullscreen.html # Used by Authentication pages
135
- | | | -- base.html # Used by common pages
136
- | |
137
- | | -- accounts/ # Authentication pages
138
- | | -- login.html # Login page
139
- | | -- register.html # Registration page
140
- |
141
- | -- requirements.txt # Development modules - SQLite storage
142
- | -- requirements-mysql.txt # Production modules - Mysql DMBS
143
- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
144
- |
145
- | -- .env # Inject Configuration via Environment
146
- | -- config.py # Set up the app
147
- | -- run.py # Start the app - WSGI gateway
148
- |
149
- | -- ************************************************************************
165
+ $ cd apps/static/assets
150
166
```
151
167
152
168
<br />
153
169
154
- > App / Home Blueprint
155
-
156
- The * Home* blueprint handles UI Kit pages for authenticated users. This is the private zone of the app - the structure is presented below:
170
+ ** Step #3 ** - Install modules (this will create a classic ` node_modules ` directory)
157
171
158
172
``` bash
159
- < PROJECT ROOT >
160
- |
161
- | -- app/
162
- | | -- base/ # Base Blueprint - handles the authentication
163
- | | -- home/ # Home Blueprint - serve app pages (private area)
164
- | |
165
- | | -- templates/ # UI Kit Pages
166
- | |
167
- | | -- index.html # Default page
168
- | | -- page-404.html # Error 404 - mandatory page
169
- | | -- page-500.html # Error 500 - mandatory page
170
- | | -- page-403.html # Error 403 - mandatory page
171
- | | -- * .html # All other HTML pages
172
- |
173
- | -- requirements.txt # Development modules - SQLite storage
174
- | -- requirements-mysql.txt # Production modules - Mysql DMBS
175
- | -- requirements-pqsql.txt # Production modules - PostgreSql DMBS
176
- |
177
- | -- .env # Inject Configuration via Environment
178
- | -- config.py # Set up the app
179
- | -- run.py # Start the app - WSGI gateway
180
- |
181
- | -- ************************************************************************
173
+ $ npm install
174
+ // OR
175
+ $ yarn
182
176
```
183
177
184
178
<br />
185
179
180
+ ** Step #4 ** - Edit & Recompile SCSS files
181
+
182
+ ``` bash
183
+ $ gulp scss
184
+ ```
185
+
186
+ The generated file is saved in ` static/assets/css ` directory.
187
+
188
+ <br />
189
+
186
190
## Deployment
187
191
188
192
The app is provided with a basic configuration to be executed in [ Docker] ( https://www.docker.com/ ) , [ Heroku] ( https://www.heroku.com/ ) , [ Gunicorn] ( https://gunicorn.org/ ) , and [ Waitress] ( https://docs.pylonsproject.org/projects/waitress/en/stable/ ) .
0 commit comments