Soft UI Dashboard - Start fast with Bootstrap 5, Django and Docker

Hello Coders!

This article presents an open-source Django starter that uses Bootstrap 5 for the frontend layer and Docker for deployment automation. Django Soft Dashboard comes with all the bare minimum essentials required by a new simple dashboard powered by Django: authentication, integrated UI and deployment support. For newcomers, Django is a leading framework actively supported and versioned by programming experts and open-source enthusiasts.

Thanks for reading! Here are the links for fast runners:

• 👉 Django Soft UI Dashboard - LIVE Demo
• 👉 Django Soft UI Dashboard - source code

The permissive (MIT) license unlocks the usage for unlimited hobby & commercial products and eLearning activities.

✨ Product Features

In order to provide something useful and usable for developers, the codebase is provided with the latest stable Django version, unopionated structure, and a production-ready layer powered by Docker.

• Up-to-date dependencies: Django 3.2.6 LTS
• SCSS compilation - simple Gulp tooling
• DB Tools: SQLite, Django Native ORM
• Session-Based Authentication, Forms validation
• Deployment: Docker, Gunicorn / Nginx
• Support via Github (issues tracker) and Discord.

✨ How to use the product

Probably the most easier way to start the product is to execute the Docker setup that is basically a one-line command:

👉 Step #1 - Clone/download sources from Github

$ git clone https://github.com/app-generator/django-soft-ui-dashboard.git
$ cd django-soft-ui-dashboard

👉 Step #2 - Start the app in Docker

$ docker-compose up --build

At this point, we should be able to access the app in the browser, register new users, and access the private pages provided by the app.

✨ The Docker Layer

Docker is a popular virtualization software that executes our application using a cross-platform sandboxed environment. In other words we can hope for a successful execution of our app on Windows, Ubuntu or CentOS without taking into account any OS specificities during the product deployment.

The architecture

• Django App managed by Gunicorn WSGI Server
  • Guninorn starts on port 5005
• Nginx as a proxy server
  • exposes the public port 85
  • routes the client requests to inner port 5005
• Dockerfile does the following:
  • upgrade the PIP installer
  • install app deps listed on requirements.txt
  • Migrate the database (aka create tables)
  • call Gunicorn to start the app
  • Start Nginx and listen for new connections

If all goes well, the app can be accessed on http://localhost:85 and the guest users are redirected to authenticate.

The manual build involves the classic steps recommended for all Python apps:

• create a virtual environment
• install the dependencies
• setup/migrate the database
• start the app using a development server

Let's do this!

👉 Step #1 - Clone the sources

$ git clone https://github.com/app-generator/django-soft-ui-dashboard.git
$ cd django-soft-ui-dashboard

👉 Step #2 - Create a virtual environment

$ virtualenv env
$ source env/bin/activate

👉 Step #3 - Install modules

$ # Install modules 
$ pip3 install -r requirements.txt

👉 Step #4 - Migrate Database (aka create tables)

$ python manage.py makemigrations
$ python manage.py migrate

👉 Step #5 - Start the app using Django embedded server

$ # Start the application (development mode)
$ python manage.py runserver 

By default, Django starts on port 8000 but we can easily change this with the following command:

$ # Start the app - custom port
$ # python manage.py runserver 9999

At this point, the app runs with LIVE reload and we can write new code and track all errors in real time.

Thanks for reading! For more resources and support:

• AMA in the comments - I'm here on Dev almost daily
• Free Dashboards - index provided for Django, Flask and React
• Follow me on Twitter - for OSS posts only