Django Cookie-Cutter - Bootstrap 5 Design

Published Nov 25, 2021

Hello Coders!

This article explains how to generate a simple Django project styled with Bootstrap 5 using Django Cookie-Cutter, an open-source tool powered by the well-known CookieCutter generator. The customization process allows choosing the design, database type, and other related information like project name, version and support email (if any). For newcomers, Django is a leading web framework created and actively supported by experienced developers using a batteries-included concept. Thanks for reading!

👉 Django Volt Bootstrap 5 - preview the generated project
👉 Django Cookie-Cutter - the generator sources

✨ What's in the box

Using this open-source tool we can generate in less than a minute a simple Django codebase enhanced with a few basic features like authentication, database, a nice desing and Docker scrips without much effort.

The generated code comes with an MIT License (free for commercial use) and we can generate multiple projects without investing any budget. Here are the features provided by our future project:

Up-to-date dependencies: Django 3.2.6 LTS
SCSS compilation via Gulp
UI-Ready app, SQLite Database, Django Native ORM
Modular design, clean code-base
Session-Based Authentication, Forms validation
Deployment scripts: Docker, Gunicorn / Nginx

✨ How it Works

To start fast and generate a new project the workstation should have a minimal toolchain used by the generator: Python3, GIT, and (optional) a modern code editor like VsCode or Atom.

👉 Step #1 - Create a virtual environment for dependencies

$ virtualenv env
$ source env/bin/activate

👉 Step #2 - Install Modules

$ pip install cookiecutter
$ pip install GitPython

👉 Step #3 - Generate the project

$ cookiecutter https://github.com/app-generator/cookiecutter-django.git

During the process, the output should be similar to this one:

>>> project_slug [django_bootstrap_5]:
>>> description [A simple Django project]:
>>> author_name [AppSeed]:
>>> domain_name [example.com]:
>>> email [appseed@example.com]:
>>> version [0.0.1]:
>>> Select theme:
1 - volt
2 - soft-ui
3 - datta-able
4 - material-dashboard
Choose from 1, 2, 3, 4 [1]: 1   <---- SELECT Volt (default option)
>>> Select database:
1 - sqlite3
2 - mysql
3 - postgresql
Choose from 1, 2, 3 [1]:
>>> database_name [appseed_django]:
>>> database_user [appseed_user]:
>>> database_pass [Pass1234]:
>>> PRE Gen hook executed
 Cloning theme: <material-dashboard>, REPO: https://github.com/app-generator/django-dashboard-material.git
 ...done
>>> POST Gen hook executed
 *** Copy assets
 ...done
 *** Copy templates
 ...done

Once the process is finished, we can change the directory inside the generated sources and use Docker to start the app:

👉 Step #4 - Start in Docker

$ cd django_bootstrap_5
$ docker-compose pull       # download dependencies 
$ docker-compose build      # local set up
$ docker-compose up         # start the app

At this point, the generated project should be accessible in the browser at the address http://localhost:85.

Django Cookie-Cutter - GIF animated presentation of a Bootstrap 5 project.