|
4 | 4 |
|
5 | 5 | Open-source **[Django Template](https://www.creative-tim.com/templates/django)** crafted on top of **Argon Dashboard**, a modern Bootstrap 4 design. Start your development with a modern Bootstrap 4 Admin template for Django. Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. If you want to code faster, with a smooth workflow, then you should try this template carefully developed with Django, a well-known Python Framework. **Django codebase** is crafted using a simple, modular structure that follows the best practices and provides authentication, database configuration, and deployment scripts for Docker and Gunicorn/Nginx stack.
|
6 | 6 |
|
| 7 | +- Up-to-date [dependencies](./requirements.txt): **Django 3.2.6 LTS** |
| 8 | +- [SCSS compilation](#recompile-css) via **Gulp** |
7 | 9 | - UI Kit: **Argon Dashboard** (Free Version)
|
8 | 10 | - Django Codebase - provided by **[AppSeed](https://appseed.us/)**
|
9 | 11 | - UI-Ready app, SQLite Database, Django Native ORM
|
@@ -83,62 +85,140 @@ The documentation for the **Argon Dashboard Django** is hosted at our [website](
|
83 | 85 |
|
84 | 86 | <br />
|
85 | 87 |
|
86 |
| -## File Structure |
87 |
| -Within the download you'll find the following directories and files: |
| 88 | +## Code-base structure |
| 89 | + |
| 90 | +The project is coded using a simple and intuitive structure presented bellow: |
88 | 91 |
|
89 | 92 | ```bash
|
90 | 93 | < PROJECT ROOT >
|
91 | 94 | |
|
92 |
| - |-- core/ # Implements app logic and serve the static assets |
93 |
| - | |-- settings.py # Django app bootstrapper |
| 95 | + |-- core/ # Implements app configuration |
| 96 | + | |-- settings.py # Defines Global Settings |
94 | 97 | | |-- wsgi.py # Start the app in production
|
95 | 98 | | |-- urls.py # Define URLs served by all apps/nodes
|
| 99 | + | |
| 100 | + |-- apps/ |
| 101 | + | | |
| 102 | + | |-- home/ # A simple app that serve HTML files |
| 103 | + | | |-- views.py # Serve HTML pages for authenticated users |
| 104 | + | | |-- urls.py # Define some super simple routes |
| 105 | + | | |
| 106 | + | |-- authentication/ # Handles auth routes (login and register) |
| 107 | + | | |-- urls.py # Define authentication routes |
| 108 | + | | |-- views.py # Handles login and registration |
| 109 | + | | |-- forms.py # Define auth forms (login and register) |
96 | 110 | | |
|
97 | 111 | | |-- static/
|
98 | 112 | | | |-- <css, JS, images> # CSS files, Javascripts files
|
99 | 113 | | |
|
100 | 114 | | |-- templates/ # Templates used to render pages
|
101 |
| - | | |
102 | 115 | | |-- includes/ # HTML chunks and components
|
103 | 116 | | | |-- navigation.html # Top menu component
|
104 | 117 | | | |-- sidebar.html # Sidebar component
|
105 | 118 | | | |-- footer.html # App Footer
|
106 | 119 | | | |-- scripts.html # Scripts common to all pages
|
107 | 120 | | |
|
108 |
| - | |-- layouts/ # Master pages |
109 |
| - | | |-- base-fullscreen.html # Used by Authentication pages |
110 |
| - | | |-- base.html # Used by common pages |
| 121 | + | |-- layouts/ # Master pages |
| 122 | + | | |-- base-fullscreen.html # Used by Authentication pages |
| 123 | + | | |-- base.html # Used by common pages |
111 | 124 | | |
|
112 |
| - | |-- accounts/ # Authentication pages |
113 |
| - | | |-- login.html # Login page |
114 |
| - | | |-- register.html # Register page |
| 125 | + | |-- accounts/ # Authentication pages |
| 126 | + | | |-- login.html # Login page |
| 127 | + | | |-- register.html # Register page |
115 | 128 | | |
|
116 |
| - | index.html # The default page |
117 |
| - | page-404.html # Error 404 page |
118 |
| - | page-500.html # Error 404 page |
119 |
| - | *.html # All other HTML pages |
120 |
| - | |
121 |
| - |-- authentication/ # Handles auth routes (login and register) |
122 |
| - | | |
123 |
| - | |-- urls.py # Define authentication routes |
124 |
| - | |-- views.py # Handles login and registration |
125 |
| - | |-- forms.py # Define auth forms |
| 129 | + | |-- home/ # UI Kit Pages |
| 130 | + | |-- index.html # Index page |
| 131 | + | |-- 404-page.html # 404 page |
| 132 | + | |-- *.html # All other pages |
126 | 133 | |
|
127 |
| - |-- app/ # A simple app that serve HTML files |
128 |
| - | | |
129 |
| - | |-- views.py # Serve HTML pages for authenticated users |
130 |
| - | |-- urls.py # Define some super simple routes |
| 134 | + |-- requirements.txt # Development modules - SQLite storage |
131 | 135 | |
|
132 |
| - |-- requirements.txt # Development modules - SQLite storage |
133 |
| - | |
134 |
| - |-- .env # Inject Configuration via Environment |
135 |
| - |-- manage.py # Start the app - Django default start script |
| 136 | + |-- .env # Inject Configuration via Environment |
| 137 | + |-- manage.py # Start the app - Django default start script |
136 | 138 | |
|
137 | 139 | |-- ************************************************************************
|
138 | 140 | ```
|
139 | 141 |
|
140 | 142 | <br />
|
141 | 143 |
|
| 144 | +> The bootstrap flow |
| 145 | +
|
| 146 | +- Django bootstrapper `manage.py` uses `core/settings.py` as the main configuration file |
| 147 | +- `core/settings.py` loads the app magic from `.env` file |
| 148 | +- Redirect the guest users to Login page |
| 149 | +- Unlock the pages served by *app* node for authenticated users |
| 150 | + |
| 151 | +<br /> |
| 152 | + |
| 153 | +## Recompile CSS |
| 154 | + |
| 155 | +To recompile SCSS files, follow this setup: |
| 156 | + |
| 157 | +<br /> |
| 158 | + |
| 159 | +**Step #1** - Install tools |
| 160 | + |
| 161 | +- [NodeJS](https://nodejs.org/en/) 12.x or higher |
| 162 | +- [Gulp](https://gulpjs.com/) - globally |
| 163 | + - `npm install -g gulp-cli` |
| 164 | +- [Yarn](https://yarnpkg.com/) (optional) |
| 165 | + |
| 166 | +<br /> |
| 167 | + |
| 168 | +**Step #2** - Change the working directory to `assets` folder |
| 169 | + |
| 170 | +```bash |
| 171 | +$ cd apps/static/assets |
| 172 | +``` |
| 173 | + |
| 174 | +<br /> |
| 175 | + |
| 176 | +**Step #3** - Install modules (this will create a classic `node_modules` directory) |
| 177 | + |
| 178 | +```bash |
| 179 | +$ npm install |
| 180 | +// OR |
| 181 | +$ yarn |
| 182 | +``` |
| 183 | + |
| 184 | +<br /> |
| 185 | + |
| 186 | +**Step #4** - Edit & Recompile SCSS files |
| 187 | + |
| 188 | +```bash |
| 189 | +$ gulp scss |
| 190 | +``` |
| 191 | + |
| 192 | +The generated file is saved in `static/assets/css` directory. |
| 193 | + |
| 194 | +<br /> |
| 195 | + |
| 196 | +## Deployment |
| 197 | + |
| 198 | +The app is provided with a basic configuration to be executed in [Docker](https://www.docker.com/), [Gunicorn](https://gunicorn.org/), and [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/). |
| 199 | + |
| 200 | +### [Docker](https://www.docker.com/) execution |
| 201 | +--- |
| 202 | + |
| 203 | +The application can be easily executed in a docker container. The steps: |
| 204 | + |
| 205 | +> Get the code |
| 206 | +
|
| 207 | +```bash |
| 208 | +$ git clone https://github.com/creativetimofficial/argon-dashboard-django.git |
| 209 | +$ cd argon-dashboard-django |
| 210 | +``` |
| 211 | + |
| 212 | +> Start the app in Docker |
| 213 | +
|
| 214 | +```bash |
| 215 | +$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d |
| 216 | +``` |
| 217 | + |
| 218 | +Visit `http://localhost:85` in your browser. The app should be up & running. |
| 219 | + |
| 220 | +<br /> |
| 221 | + |
142 | 222 | ## Browser Support
|
143 | 223 |
|
144 | 224 | At present, we officially aim to support the last two versions of the following browsers:
|
|
0 commit comments