Django-react-tailwindcss

Opinionated boilerplate for starting a Django project together with React front-end library and TailwindCSS css framework.

Reasoning

This repo is a boilerplate for quickly creating new websites using Django framework. It acknowledges the power of React front-end libray and client-side rendering without neglecting the usefulness of Django server-side rendering, Django template language (DTL), Jinja2 and the rest of its ecosystem.

Requirements

• Yarn or NPM package managers
• NodeJS >= 14
• Python >= 3.6
• Poetry package manager

Tooling

• Yarn (or NPM) - NodeJS package manager
• Poetry - Python package manager
• Django framework
• React front-end library
• Webpack JavaScript module bundler
• Babel JavaScript compiler
• TailwindCSS css framework
• Clean-CSS css optimizer

Concepts

• The power of React with Django "batteries included philosophy" framework.

• Static files (generated by build tools or added manually) live in the static directory. (e.g., images, fonts, css and js files bundled (or not) by webpack)

• Files that needs to be pre-processed live under assets directory. (e.g., assets/css/tailwind.css and files under assets/components)

• All Django templates live in templates directory

Installing

• Do the project scaffolding with:

  $ npx degit jvcarli/django-react-tailwindcss myproject

  Alternatively, you can use $ git clone https://github.com/jvcarli/django-react-tailwindcss and remove the .git directory.

• Inside the project root directory install node and python dependencies with:

  $ yarn

  Note: Yarn will install node dependencies as usually and right after run a script that starts a python virtual environment and install python dependencies.

  This command will fail if you don't have poetry installed. See caveats for more info.

• SECURITY

  After cloning and installing the dependencies run bootstrap.sh script. It's just a simple bash script that runs a django internal command that regenerates Django SECRET_KEY (it must be UNIQUE for every project.).

  You won't be able to run django server if you don't have a SECRET_KEY. This is by design. Remember to keep the secret key used in production secret. The key generated by this script is meant to be only used in a development enviroment, so it can be shared without any problems.

  It only needs to be run once, it can be deleted after.

  $ ./bootstrap.sh

• Start Django server with:

  $ yarn dev

  You should be able to see a hello world page at http://localhost:8000/

• Have fun!

Caveats

ATTENTION: $ yarn and $ yarn dev use poetry cli in the background.

If you DO WISH to use pip or any other python package manager edit package.json file by removing poetry commands from prepare and dev scripts. Remember to always source your python virtual environment before running $ yarn dev and to install the dependencies stated in pyproject.toml .

bootstrap.sh runs poetry in the background too, so you'll need to remove poetry run from the script and update it accordingly your python pacakge manager.