Boilerplate Django Dashboards
The reference codebase used in all Django Admin Dashboards.
Open-Source codebase used by all Django Dashboards provided by AppSeed.
    Up-to-date dependencies: Django 3.2.6 LTS
    ​SCSS compilation via Gulp
    Bootstrap 5 Design: Volt Dashboard (demo link)
    SQLite Database, Django Native ORM
    Session-Based Authentication, Forms validation
    Deployment scripts: Docker, Gunicorn/Nginx
    Custom Admin Theme (open-source)
    Free Support via Github (issues tracker) and Discord.
Links
    ​Source Code - released on Github (MIT License)
    Product ROADMAP:
      Up-to-date dependencies
      Improved authentication:
        Password reset, Email confirmation on register
      Extended user model: custom fiels: Name, Surname, Address, User Photo
      API via DRF
      Data Tables - paginated information
      Sample Charts
      Social Login for Google and Github
      Deployment:
        Docker
        HEROKU, AWS Ec2, Google Cloud, Azure
      Payments: One-time payments via Stripe Checkout​

Environment

To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full list with dependencies and tools required to build the app:
    ​Python3 - the programming language used to code the app
    ​GIT - used to clone the source code from the Github repository
    Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

Start in Docker

The project comes with Docker support that allows a quick start in any environment
Step #1 - Get the source code
    Download the ZIP from the product page
    Use GIT tool in the terminal to clone the source code
1
$ git clone https://github.com/app-generator/boilerplate-code-django-dashboard
2
$ cd boilerplate-code-django-dashboard
Copied!
Step #2 - Execute Docker commands
1
$ docker-compose pull # download the modules
2
$ docker-compose build # local build
3
$ docker-compose up # start the app
Copied!
Visit http://localhost:85 in your browser. The app should be up & running.
Note: for Linux-based systems the above commands might require sudo execution. Here is a sample:
1
$ sudo docker-compose pull
2
$ sudo docker-compose build
3
$ sudo docker-compose up -d # execute demonized via '-d' argument
Copied!

Build from Sources

To built and start the app locally, follow the steps:
Step #1 - Get the source code
    Download the ZIP from the product page
    Using GIT tool in the terminal to clone the source code
Step #2 - Install modules using a Virtual Environment
1
$ # Virtualenv modules installation (Unix based systems)
2
$ virtualenv env
3
$ source env/bin/activate
4
$
5
$ # Virtualenv modules installation (Windows based systems)
6
$ # virtualenv env
7
$ # .\env\Scripts\activate
8
$
9
$ # Install modules - SQLite Storage
10
$ pip3 install -r requirements.txt
Copied!
Step #3 - Setup (migrate) database
1
$ python manage.py makemigrations
2
$ python manage.py migrate
Copied!
Step #3 - Start the app
1
$ # Start the application (development mode)
2
$ python manage.py runserver # default port 8000
3
$
4
$ # Start the app - custom port
5
$ # python manage.py runserver 0.0.0.0:<your_port>
Copied!
At this point, we can visit the app in the browser http://127.0.0.1:8000/. By default, the app will redirect guest users to the login page. To access the private pages:
    Create a new user using the registration page
    Authenticate using the login page

App Codebase

1
< PROJECT ROOT >
2
|
3
|-- core/ # Implements app configuration
4
| |-- settings.py # Defines Global Settings
5
| |-- wsgi.py # Start the app in production
6
| |-- urls.py # Define URLs served by all apps/nodes
7
|
8
|-- apps/
9
| |
10
| |-- home/ # A simple app that serve HTML files
11
| |-- authentication/ # Handles auth routes (login and register)
12
| |
13
| |-- static/
14
| | |-- <css, JS, images> # CSS files, Javascripts files
15
| |
16
| |-- templates/ # Templates used to render pages
17
| |-- includes/ # HTML chunks and components
18
| |-- layouts/ # Master pages
19
| |-- accounts/ # Authentication pages
20
| |-- home/ # UI Kit Pages
21
| |-- index.html # Index page
22
| |-- 404-page.html # 404 page
23
| |-- *.html # All other pages
24
|
25
|-- requirements.txt # Development modules - SQLite storage
26
|
27
|-- .env # Inject Configuration via Environment
28
|-- manage.py # Start the app - Django default start script
29
|
30
|-- ************************************************************************
Copied!

App Bootstrap Flow

    Django bootstrapper manage.py uses core/settings.py as the main configuration file
    core/settings.py loads the app magic from .env file
    Redirect the guest users to Login page
    Unlock the pages served by app node for authenticated users

Recompile CSS

To recompile SCSS files, follow this setup:
Step #1 - Install tools
    ​NodeJS 12.x or higher
    ​Gulp - globally
      npm install -g gulp-cli
    ​Yarn (optional)
Step #2 - Change the working directory to assets folder
1
$ cd apps/static/assets
Copied!
Step #3 - Install modules (this will create a classic node_modules directory)
1
$ npm install
2
// OR
3
$ yarn
Copied!
Step #4 - Edit & Recompile SCSS files
1
$ gulp scss
Copied!
The generated files are saved in static/assets/css directory.

App Configuration

The environment configuration file .env specify a short-list with variables:
1
# File: core/settings.py
2
​
3
...
4
​
5
# SECRET_KEY value is read from `.env` file
6
SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_1122')
7
​
8
...
9
​
10
# Load the production server address from `.env` file
11
ALLOWED_HOSTS = ['localhost', '127.0.0.1', config('SERVER', default='127.0.0.1')]
12
​
13
...
14
​
15
# The SQLite database, located in the root of the project
16
DATABASES = {
17
'default': {
18
'ENGINE': 'django.db.backends.sqlite3',
19
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
20
}
21
}
Copied!
The default database is SQLite and the name and physical location can be changed by updating core/settings.py The database and associated tables are created during the migration commands, listed in the README file:
1
$ python manage.py makemigrations
2
$ python manage.py migrate
Copied!

App Tables

The tables created by the Django migration are generated by the default modules that handle the authentication, session management, and permissions:
    ​django.contrib.auth - Django middleware app that implements authentication
    django.contrib.sessions - Django middleware app that implements session management

App Routing

The settings file core/settings.py specify the routing file core/urls.py via ROOT_URLCONF variable:
1
# File: core/settings.py
2
...
3
​
4
ROOT_URLCONF = 'core.urls'
5
​
6
...
Copied!
core/urls.py file
The core routing file aggregates the routing from all apps defined in the project:
1
# File: core/urls.py
2
​
3
urlpatterns = [
4
# Django admin routes - inherited from Django default modules
5
path('admin/', admin.site.urls),
6
​
7
# Authentication routes - login / register
8
# exposed by `authentication` app
9
path("", include("authentication.urls")),
10
​
11
# App routes - the modules that serve the UI Kit pages
12
path("", include("app.urls"))
13
]
Copied!

Pages & Assets

Pages served by the starter are organized using a simple folder structure:
1
< PROJECT ROOT >
2
|
3
|-- apps/
4
| |
5
| |-- home/ # A simple app that serve HTML files
6
| | |-- views.py # Serve HTML pages for authenticated users
7
| | |-- urls.py # Define some super simple routes
8
| |
9
| |-- authentication/ # Handles auth routes (login and register)
10
| | |-- urls.py # Define authentication routes
11
| | |-- views.py # Handles login and registration
12
| | |-- forms.py # Define auth forms (login and register)
13
| |
14
| |-- static/
15
| | |-- <css, JS, images> # CSS files, Javascripts files
16
| |
17
| |-- templates/ # Templates used to render pages
18
| |-- includes/ # HTML chunks and components
19
| | |-- navigation.html # Top menu component
20
| | |-- sidebar.html # Sidebar component
21
| | |-- footer.html # App Footer
22
| | |-- scripts.html # Scripts common to all pages
23
| |
24
| |-- layouts/ # Master pages
25
| | |-- base-fullscreen.html # Used by Authentication pages
26
| | |-- base.html # Used by common pages
27
| |
28
| |-- accounts/ # Authentication pages
29
| | |-- login.html # Login page
30
| | |-- register.html # Register page
31
| |
32
| |-- home/ # UI Kit Pages
33
| |-- index.html # Index page
34
| |-- 404-page.html # 404 page
35
| |-- *.html # All other pages
36
|
37
|-- ************************************************************************
Copied!

Static Assets

The folder that contains all assets provided by the UI Kit is located in the core directory
    static/assets - the root directory for all files (JS, images)
    static/assets/css - CSS files that style the app
    static/assets/img - Images and Icons
    static/assets/js - javascript files provided by the UI Kit
    static/assets/scss - SCSS files, if provided by the UI Kit vendor

Templates Folder

All pages served by the application are located inside this folder.
    templates/layouts - the directory with app master pages (layouts)
    templates/includes - the directory with HTML chunks and components
    templates/accounts - store the authentication pages (login, registration)
    templates/ - all pages defined/served by the app are saved at the root of the templates folder

Common pages

This section lists the common pages defined in all Flask applications prototyped on top of this generic starter.
    login.html, rendered with layouts/base-fullscreen.html
    register.html, rendered with layouts/base-fullscreen.html
    index.html, rendered with layouts/base.html
    page-404.html, rendered with layouts/base.html
    page-403.html, rendered with layouts/base.html

Data Structures

The starter exposes a short-list with data structures used globally across the app:

request.user object

Constructed by AuthenticationMiddleware can be used to detect if the current request is executed by an authenticated user or not. The object has global visibility and can be used in all app controllers and handlers but also in views.
Usage in controller
1
# Sample File
2
​
3
from django.http import HttpResponse
4
​
5
def testme(path):
6
​
7
# Redirect guests users to login page
8
if request.user.is_authenticated:
9
return HttpResponse("User authenticated")
10
else:
11
return HttpResponse("Access forbidden - please authenticate")
Copied!
Usage in view
1
<div class="collapse navbar-collapse" id="navigation">
2
<ul class="navbar-nav ml-auto">
3
​
4
<!-- The Usage of <current_user> object -->
5
<div data-gb-custom-block data-tag="if"></div>
6
​
7
<!-- Html chunk rendered for authenticated users-->
8
​
9
<li class="nav-item">
10
<a href="/" class="nav-link text-primary">
11
<i class="tim-icons icon-minimal-left"></i> Your Dashboard
12
</a>
13
</li>
14
​
15
16
​
17
<div data-gb-custom-block data-tag="else"></div>
18
​
19
<!-- Html chunk rendered for guests users-->
20
​
21
<li class="nav-item ">
22
<a href="
23
​
24
<div data-gb-custom-block data-tag="url" data-0='register'></div>" class="nav-link">
25
<i class="tim-icons icon-laptop"></i> Register
26
</a>
27
</li>
28
<li class="nav-item ">
29
<a href="<div data-gb-custom-block data-tag="url" data-0='login'>" class="nav-link">
30
<i class="tim-icons icon-single-02"></i> Login
31
</a>
32
</li>
33
​
34
</div>
35
​
36
</ul>
37
</div>
Copied!
Last modified 2d ago