Hello Coders,
This article presents an open-source Django Bootstrap 5 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.
- Django Bootstrap 5 Volt - product page
- Django Bootstrap 5 Volt - LIVE deployment
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
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.
- Getting Started with Python - a super simple tutorial
- Setup Windows for development - a minimum toolkit
- Setup CentOS for development - a minimum toolkit
Install Django
To install Django, we can use PIP, the official Python package manager:
$ 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:
$ django-admin startproject site1
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
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
As we can see, getting started and coding a super simple app using Django is quite easy and fun.
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
- 11 Example pages - Dashboard, Settings, Components (modals, buttons, forms), Sign IN, Sign UP
Django Volt Dashboard - User Page
Django Volt Dashboard - UI Elements
Django Volt Dashboard - UI Alerts
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
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-volt.git
$ cd django-dashboard-volt
Set up environment
$ # 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
$ # 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
Main dashboard screen
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 - the product page
- Django Volt - Sources, published on Github (MIT License)
Thank you! Let me know your thoughts in the comments or follow my activity on Twitter - Sm0ke
Top comments (0)