DEV Community

Cover image for Soft UI Dashboard - Start fast with Bootstrap 5, Django and Docker
Sm0ke
Sm0ke

Posted on

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:


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


Soft UI Dashboard, the VR page provided by an open-source starter powered by Django.


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

πŸ‘‰ Step #2 - Start the app in Docker

$ docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

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.


Soft UI Dashboard, login page powered by Django, a leading web framework written in Python.


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

πŸ‘‰ Step #2 - Create a virtual environment

$ virtualenv env
$ source env/bin/activate
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step #3 - Install modules

$ # Install modules 
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step #4 - Migrate Database (aka create tables)

$ python manage.py makemigrations
$ python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step #5 - Start the app using Django embedded server

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

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

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

Discussion (2)

Collapse
melissap profile image
Melissa P. ッ

Nice design.

Collapse
sm0ke profile image
Sm0ke Author

Ty!