Django Volt Dashboard - Bootstrap 5, Vanilla JS design (no jQuery)
Tags: webdev, django, dashboards, appseed
Published: 2020-10-02 17:45:18

---
title: Django Volt Dashboard - Bootstrap 5, Vanilla JS design (no jQuery)
published: true
description: A simple Django starter coded with basic modules on top of Volt Bootstrap 5 template
tags: webdev, django, dashboards, appseed
cover_image: https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen-login.png
---
Hello Coders,

This article presents an open-source **[Django Bootstrap 5](https://appseed.us/admin-dashboards/django-dashboard-volt)**  starter crafted on op of Volt Dashboard template, a modern Bootstrap 5/Vanilla JS design. The product can be downloaded from Github and the permissive license allows the usage for unlimited hobby and commercial products.  For newcomers, **Django** is a Python Web framework built by experienced developers that encourages rapid development of modern web applications.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- **[Django Bootstrap 5](https://appseed.us/admin-dashboards/django-dashboard-volt)** Volt - product page
- [Django Bootstrap 5](https://django-volt-dashboard.appseed-srv1.com/) Volt - LIVE deployment

---

![Django Bootstrap 5 - Volt Dashboard, animated presentation.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-intro.gif)

--- 

## What is **[Django](https://appseed.us/apps/django/)**

For newcomers, this section explains what is **[Django](https://appseed.us/apps/django/)** and the basic features offered by this popular Python-based web framework. To code a simple web app on top of Django, Python must be installed and accessible via the terminal. Just to be sure we have Python on our workstation, we can type `python --version` in a terminal window and check the output. Anything that's not an error, is a good thing.

---

```bash
$  python --version
Python 3.8.4 <--- All Good
```

---

If this command is not recognized by the operating system, Python should be downloaded and installed from the official **[website](https://www.python.org/)**. To complete this phase, feel free to access below resources or just Google for more tutorials regarding Python installation and get back here once the setup is complete.

- [Getting Started with Python](https://docs.appseed.us/content/how-to/getting-started-with-python/) - a super simple tutorial
- [Setup Windows for development](https://docs.appseed.us/content/how-to/setup-windows-for-development/) - a minimum toolkit 
- [Setup CentOS for development](https://docs.appseed.us/content/how-to/setup-centos-for-development/) - a minimum toolkit 

---

> Install Django

To install Django, we can use `PIP`, the official Python package manager:

```bash
$ pip install Django
```

---

> Django - A minimal application

Django comes with a powerful CLI (command line interface) to assist developers to prototype a project skeleton with a single line:

```bash
$ django-admin startproject site1
```

This will create a site1 directory in your current directory.

The files created by `startproject` command:

```bash
site1/                  # The root directory (we can change the name)
    manage.py           # Django utility file
    site1/              # This is the actual Django project
        __init__.py     # 
        settings.py     # Store app settings
        urls.py         # Define app routes
        asgi.py         # Used in deployment 
        wsgi.py         # Used in deployment  
```

---

Once the project has been generated successfully, we can start with ease using the command:

```bash
$ python ./manage.py runserver
$ # App runs on http://localhost:8000
```

As we can see, getting started and coding a super simple app using Django is quite easy and fun. 

---

## [Volt Dashboard](https://docs.appseed.us/content/bootstrap-template/volt-dashboard/) - Free BS5 Template

Volt is a free and open-source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages, and 3 customized plugins. 

- 100+ Components - the usage is documented [here](https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/accordions/)
- 11 Example pages - Dashboard, Settings, Components (modals, buttons, forms), Sign IN, Sign UP

---

**Django Volt Dashboard - User Page**

![Django Volt Dashboard - User Page.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen-user.png)

---

**Django Volt Dashboard - UI Elements**

![Django Volt Dashboard - UI Buttons Elements.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen-buttons.png)

---

**Django Volt Dashboard - UI Alerts**

![Django Volt Dashboard - UI Alerts.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen-alerts.png)

---

## How to compile the project

In case anyone finds this project useful, to compile it locally only a few commands typed in the terminal are required. 

**Clone the sources** via GIT command tool

```bash
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-volt.git
$ cd django-dashboard-volt
```

---

**Set up environment**

```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
```

--- 

**Database creation & project bootstrap**

```bash
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver
```

If all goes well, we should be able to visit the app in the browser at address `http://localhost:8000` (8000 - the default port used by Django)

By default the used redirect guests to the login page. In order to pass the login, please register a new user and authenticate. 

**Login page**

![Django Volt - Free Bootstrap 4 dashboard, the login page.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen-login.png) 

---

**Main dashboard screen**

![Django Volt - Free Bootstrap 4 dashboard, the main dashboard page.](https://raw.githubusercontent.com/app-generator/django-dashboard-volt/master/media/django-dashboard-volt-screen.png)

---

The project comes deployment-ready for Docker, Nginx/Gunicorn stack. The full information can be accessed via the product page and Github repository. 

- [Django Volt](https://appseed.us/admin-dashboards/django-dashboard-volt) - the product page
- [Django Volt - Sources](https://github.com/app-generator/django-dashboard-volt), published on Github (MIT License)

---

**Thank you!** Let me know your thoughts in the comments or follow my activity on Twitter - [Sm0ke](https://twitter.com/Sm0keDev)