DEV Community

loading...
Cover image for Django Bootstrap 5 - Volt Dashboard (Free Product)

Django Bootstrap 5 - Volt Dashboard (Free Product)

sm0ke profile image Sm0ke Originally published at admin-dashboards.com Updated on ・5 min read

Hello Coders,

This article presents an open-source Django Bootstrap 5 starter crafted on op of Volt Dashboard template, a modern jQuery-free 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.

Thank you! Content provided by AppSeed - App Generator.



Django Bootstrap 5 - Volt Dashboard, animated presentation.


What is Django

For newcomers, this section explains what is 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.


$  python --version
Python 3.8.4 <--- All Good
Enter fullscreen mode Exit fullscreen mode

If this command is not recognized by the operating system, Python should be downloaded and installed from the official website. 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.


Install Django

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

$ pip install Django
Enter fullscreen mode Exit fullscreen mode

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:

$ django-admin startproject site1
Enter fullscreen mode Exit fullscreen mode

This will create a site1 directory in your current directory.

The files created by startproject command:

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  
Enter fullscreen mode Exit fullscreen mode

The meaning of each file:

  • The outer site1/ root directory is a container for your project. Its name is not important, we can rename it without causing any damages to the project.
  • manage.py: A command-line utility that lets you interact with this Django project:
    • create databases
    • create migrations (for database updates)
  • The inner site1/ directory is the actual Python package for your project. Its name is the Python package name you’ll need to use to import anything inside it (e.g. site1.urls).
  • site1/init.py: An empty file that tells Python that this directory should be considered a Python package.
  • site1/settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.
  • site1/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site.
  • site1/asgi.py: An entry-point for ASGI-compatible web servers to serve your project.
  • site1/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project.

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

$ python ./manage.py runserver
$ # App runs on http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

As we can see, getting started and coding a super simple app using Django is quite easy and fun. Our Django sample (Volt Dashboard) comes already with a basic set of features and scripts for smooth integration and deployment.


Django Volt Bootstrap 5 - How to use it

The product can be downloaded and used directly from Github and the build instructions are provided in the README files, saved along with project sources. To compile it, we need to follow this simple set up:

  • Download the sources - using GIT, the popular versioning command tool
  • Install the dependencies - specified in the requirements file
  • Set up the environment - create database/tables
  • Start the application and visit the browser to see it in action

By default the project redirects guest users to authenticate and to pass the login we need to register a user first (there is no default user).


Django Volt Bootstrap 5 - Open-source Django template, log in page.


Let's compile the project! If something goes wrong, feel free to ask for assistance in the comments section.


1# - Clone the sources (from Github)

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-volt.git
$ cd django-dashboard-volt
Enter fullscreen mode Exit fullscreen mode

2# - Install modules/dependencies

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

3# - Set up environment & create tables

$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

4# - Start the application (development mode)

$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in the browser: http://127.0.0.1:8000/
Enter fullscreen mode Exit fullscreen mode

The private pages unlocked by our Django starter are simple with a distinct design:


Django Volt Bootstrap 5 - Open-source Django template, Dashboard page.


Django Bootstrap 5 - User Profile

Django Volt Bootstrap 5 - Open-source Django template, User profile page.


Django Bootstrap 5 - UI Alerts

Django Volt Bootstrap 5 - Open-source Django template, User profile page.


Bootstrap 5

Bootstrap is the most popular CSS Framework that powers 18+ Million websites across the globe. As stands on the HOMEpage, Bootstrap can be used to quickly design and customize responsive mobile-first sites via Sass variables and mixins, responsive grid system, extensive prebuilt components, and JavaScript plugins.

What's new in Bootstrap 5 - Removing jQuery (probably the most important update), Dropping support for IE 10 & 11, Custom SVG icon library, Switching to Hugo from Jekyll, a Ruby-based SSG.

To Read more about Bootstrap 5, feel free to access:


Bootstrap 5 - Open-Source CSS Framework.


Thanks for reading! For more related content or support, please access:


Volt PRO is a premium Bootstrap 5 Admin Dashboard featuring over 800 components, 20 example pages and 10 fully customized plugins written in Vanilla Javascript. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.


Django Bootstrap 5 Volt - Premium Django starter provided by AppSeed.

Discussion (0)

pic
Editor guide