@@ -4,6 +4,8 @@ Admin dashboard generated by AppSeed in **Flask** Framework. Designed for those
44
55<br />
66
7+ - Up-to-date [ dependencies] ( ./requirements.txt ) : ** Flask 2.0.1**
8+ - [ SCSS compilation] ( #recompile-css ) via ** Gulp**
79- UI Kit: ** [ Soft UI Dashboard] ( https://bit.ly/2Q1uIfK ) ** (Free Version) provided by ** Creative-Tim**
810- DBMS: SQLite, PostgreSQL (production)
911- DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
@@ -73,24 +75,57 @@ $ # Access the dashboard in browser: http://127.0.0.1:5000/
7375
7476The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:
7577
76- > Simplified version
77-
7878``` bash
7979< PROJECT ROOT >
8080 |
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
8493 | |
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
86116 |
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
90120 |
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
94129 |
95130 | -- ************************************************************************
96131```
@@ -109,80 +144,49 @@ The project is coded using blueprints, app factory pattern, dual configuration p
109144
110145<br />
111146
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 />
113161
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
115163
116164``` 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
150166```
151167
152168<br />
153169
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)
157171
158172``` 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
182176```
183177
184178<br />
185179
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+
186190## Deployment
187191
188192The 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