Django New Project Template

A project template that I use mostly when I start a new Django project.

Structure and folders

• project_name: The project folder
  • settings: The settings module separated by environment type
  • apps: Django applications
  • templates: Global Django templates
  • static: Static files generated by webpack
  • assets: Web files used by webpack to generate static files
• requirements: Requirements separated by environment
• scripts: A folder which contains differnt scripts, db files, etc.
  • bootstrap.sh: A script to generate the .env file and start the docker compose
  • init.sh: A script used in docker container to start the Django application
  • sshd_config: SSHD config for SSH service in docker container
• webpack: A folder with Webpack configuration

Features

• Latest Django
• Django Webpack loader configured
• Whitenoise static storage configured
• Docker container with multi-stage

Environment variables

I use python-dotenv to hold environment variables. Create a new .env file and add the following environment variables:

# Django
DJANGO_SETTINGS_MODULE   # django settings module
DOCKER_BUILD_ENV         # requirements.txt file to build in docker stage
SECRET_KEY               # django secret key

# Database
DB_NAME                  # postgres database name
DB_USER                  # postgres datbase user
DB_PASS                  # postgres database pass
DB_HOST                  # postgres host
DB_PORT                  # postgres port

To generate .env run the script scripts/bootstrap.sh.

Use the template

➡️ Start a new project using the following command:

django-admin startproject \
  --template https://github.com/madalinpopa/django-project-template/archive/master.zip \
  --extension py,cfg,yml,ini,toml,sh,js \
  <project_name>

➡️ After cloning and start a new project, rename and remove the .yml extension for Dockerfile and Makefile

Webpack libaries and plugins

# Webpack
webpack                        # webpack
webpack-cli                    # webpack cli 
webpack-merge                  # used to combine multiple webpack configuration
webpack-bundle-tracker         # used to track webpack bundle

# Webpack plugins
mini-css-extract-plugin        # used to extract css into separate file
compression-webpack-plugin     # used to compress the js files

# Webpack loaders
css-loader                     # used to load css
postcss-loader                 # used with tailwindcss to parse css
babel-loader                   # used to load js

# Other libraries
@babel/core
@babel/preset-env
htmx.org
alpinejs
autoprefixer
postcss
tailwindcss