|
8 | 8 |
|
9 | 9 | > Free product - **Flask Dashboard** starter project - Features:
|
10 | 10 |
|
| 11 | +- Up-to-date [dependencies](./requirements.txt): **Flask 2.0.1** |
| 12 | +- [SCSS compilation](#recompile-css) via **Gulp** |
11 | 13 | - UI Kit: **Argon Dashboard** (Free Version) provided by **[Creative-Tim](https://www.creative-tim.com/)**
|
12 | 14 | - Flask Codebase - provided by **[AppSeed](https://appseed.us/)**
|
13 | 15 | - SQLite, PostgreSQL, SQLAlchemy ORM
|
|
22 | 24 | ## Table of Contents
|
23 | 25 |
|
24 | 26 | * [Demo](#demo)
|
| 27 | +* [Docker Support](#docker-support) |
25 | 28 | * [Quick Start](#quick-start)
|
26 | 29 | * [Documentation](#documentation)
|
27 | 30 | * [File Structure](#file-structure)
|
|
42 | 45 |
|
43 | 46 | <br />
|
44 | 47 |
|
| 48 | +## Docker Support |
| 49 | + |
| 50 | +> Get the code |
| 51 | +
|
| 52 | +```bash |
| 53 | +$ git clone https://github.com/app-generator/black-dashboard-flask.git |
| 54 | +$ cd black-dashboard-flask |
| 55 | +``` |
| 56 | + |
| 57 | +> Start the app in Docker |
| 58 | +
|
| 59 | +```bash |
| 60 | +$ docker-compose pull # download dependencies |
| 61 | +$ docker-compose build # local set up |
| 62 | +$ docker-compose up -d # start the app |
| 63 | +``` |
| 64 | + |
| 65 | +Visit `http://localhost:85` in your browser. The app should be up & running. |
| 66 | + |
| 67 | +<br /> |
| 68 | + |
45 | 69 | ## Quick start
|
46 | 70 |
|
47 | 71 | > UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.
|
@@ -98,41 +122,115 @@ Within the download you'll find the following directories and files:
|
98 | 122 | ```bash
|
99 | 123 | < PROJECT ROOT >
|
100 | 124 | |
|
101 |
| - |-- app/ |
102 |
| - | |-- home/ # Home Blueprint - serve app pages (private area) |
103 |
| - | |-- base/ # Base Blueprint - handles the authentication |
104 |
| - | |-- static/ |
105 |
| - | | |-- <css, JS, images> # CSS files, Javascripts files |
106 |
| - | | |
107 |
| - | |-- templates/ # Templates used to render pages |
108 |
| - | | |
109 |
| - | |-- includes/ # |
110 |
| - | | |-- navigation.html # Top menu component |
111 |
| - | | |-- sidebar.html # Sidebar component |
112 |
| - | | |-- footer.html # App Footer |
113 |
| - | | |-- scripts.html # Scripts common to all pages |
114 |
| - | | |
115 |
| - | |-- layouts/ # Master pages |
116 |
| - | | |-- base-fullscreen.html # Used by Authentication pages |
117 |
| - | | |-- base.html # Used by common pages |
118 |
| - | | |
119 |
| - | |-- accounts/ # Authentication pages |
120 |
| - | |-- login.html # Login page |
121 |
| - | |-- register.html # Registration page |
| 125 | + |-- apps/ |
| 126 | + | | |
| 127 | + | |-- home/ # A simple app that serve HTML files |
| 128 | + | | |-- routes.py # Define app routes |
| 129 | + | | |
| 130 | + | |-- authentication/ # Handles auth routes (login and register) |
| 131 | + | | |-- routes.py # Define authentication routes |
| 132 | + | | |-- models.py # Defines models |
| 133 | + | | |-- forms.py # Define auth forms (login and register) |
| 134 | + | | |
| 135 | + | |-- static/ |
| 136 | + | | |-- <css, JS, images> # CSS files, Javascripts files |
| 137 | + | | |
| 138 | + | |-- templates/ # Templates used to render pages |
| 139 | + | | |-- includes/ # HTML chunks and components |
| 140 | + | | | |-- navigation.html # Top menu component |
| 141 | + | | | |-- sidebar.html # Sidebar component |
| 142 | + | | | |-- footer.html # App Footer |
| 143 | + | | | |-- scripts.html # Scripts common to all pages |
| 144 | + | | | |
| 145 | + | | |-- layouts/ # Master pages |
| 146 | + | | | |-- base-fullscreen.html # Used by Authentication pages |
| 147 | + | | | |-- base.html # Used by common pages |
| 148 | + | | | |
| 149 | + | | |-- accounts/ # Authentication pages |
| 150 | + | | | |-- login.html # Login page |
| 151 | + | | | |-- register.html # Register page |
| 152 | + | | | |
| 153 | + | | |-- home/ # UI Kit Pages |
| 154 | + | | |-- index.html # Index page |
| 155 | + | | |-- 404-page.html # 404 page |
| 156 | + | | |-- *.html # All other pages |
| 157 | + | | |
| 158 | + | config.py # Set up the app |
| 159 | + | __init__.py # Initialize the app |
| 160 | + | |
| 161 | + |-- requirements.txt # Development modules - SQLite storage |
| 162 | + |-- requirements-mysql.txt # Production modules - Mysql DMBS |
| 163 | + |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS |
122 | 164 | |
|
123 |
| - |-- requirements.txt # Development modules - SQLite storage |
124 |
| - |-- requirements-mysql.txt # Production modules - Mysql DMBS |
125 |
| - |-- requirements-pqsql.txt # Production modules - PostgreSql DMBS |
| 165 | + |-- Dockerfile # Deployment |
| 166 | + |-- docker-compose.yml # Deployment |
| 167 | + |-- gunicorn-cfg.py # Deployment |
| 168 | + |-- nginx # Deployment |
| 169 | + | |-- appseed-app.conf # Deployment |
126 | 170 | |
|
127 |
| - |-- .env # Inject Configuration via Environment |
128 |
| - |-- config.py # Set up the app |
129 |
| - |-- run.py # Start the app - WSGI gateway |
| 171 | + |-- .env # Inject Configuration via Environment |
| 172 | + |-- run.py # Start the app - WSGI gateway |
130 | 173 | |
|
131 | 174 | |-- ************************************************************************
|
132 | 175 | ```
|
133 | 176 |
|
134 | 177 | <br />
|
135 | 178 |
|
| 179 | +> The bootstrap flow |
| 180 | +
|
| 181 | +- `run.py` loads the `.env` file |
| 182 | +- Initialize the app using the specified profile: *Debug* or *Production* |
| 183 | + - If env.DEBUG is set to *True* the SQLite storage is used |
| 184 | + - If env.DEBUG is set to *False* the specified DB driver is used (MySql, PostgreSQL) |
| 185 | +- Call the app factory method `create_app` defined in app/__init__.py |
| 186 | +- Redirect the guest users to Login page |
| 187 | +- Unlock the pages served by *home* blueprint for authenticated users |
| 188 | + |
| 189 | +<br /> |
| 190 | + |
| 191 | +## Recompile CSS |
| 192 | + |
| 193 | +To recompile SCSS files, follow this setup: |
| 194 | + |
| 195 | +<br /> |
| 196 | + |
| 197 | +**Step #1** - Install tools |
| 198 | + |
| 199 | +- [NodeJS](https://nodejs.org/en/) 12.x or higher |
| 200 | +- [Gulp](https://gulpjs.com/) - globally |
| 201 | + - `npm install -g gulp-cli` |
| 202 | +- [Yarn](https://yarnpkg.com/) (optional) |
| 203 | + |
| 204 | +<br /> |
| 205 | + |
| 206 | +**Step #2** - Change the working directory to `assets` folder |
| 207 | + |
| 208 | +```bash |
| 209 | +$ cd apps/static/assets |
| 210 | +``` |
| 211 | + |
| 212 | +<br /> |
| 213 | + |
| 214 | +**Step #3** - Install modules (this will create a classic `node_modules` directory) |
| 215 | + |
| 216 | +```bash |
| 217 | +$ npm install |
| 218 | +// OR |
| 219 | +$ yarn |
| 220 | +``` |
| 221 | + |
| 222 | +<br /> |
| 223 | + |
| 224 | +**Step #4** - Edit & Recompile SCSS files |
| 225 | + |
| 226 | +```bash |
| 227 | +$ gulp scss |
| 228 | +``` |
| 229 | + |
| 230 | +The generated file is saved in `static/assets/css` directory. |
| 231 | + |
| 232 | +<br /> |
| 233 | + |
136 | 234 | ## Browser Support
|
137 | 235 |
|
138 | 236 | At present, we officially aim to support the last two versions of the following browsers:
|
|
0 commit comments