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.
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
- Setup CentOS for development
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
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
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
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).
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
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
3# - Set up environment & create tables
$ # Create tables $ python manage.py makemigrations $ python manage.py migrate
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/
The private pages unlocked by our Django starter are simple with a distinct design:
Django Bootstrap 5 - User Profile
Django Bootstrap 5 - UI Alerts
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 - the official website and documentation
- Bootstrap 5 - what's new, a nice article
- Bootstrap 5 tutorial - Learn how to get started without jQuery
Thanks for reading! For more related content or support, please access:
- Django Bootstrap 5 Volt - Sources - published on Github
- Django Bootstrap 5 PRO - more pages, components.