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
assetsdirectory. (e.g.,assets/css/tailwind.cssand files underassets/components) -
All Django templates live in
templatesdirectory
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-tailwindcssand remove the.gitdirectory. -
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
poetryinstalled. See caveats for more info. -
SECURITY
After cloning and installing the dependencies run
bootstrap.shscript. 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.
21 Nov 15, 2022
67 Dec 8, 2022
2 May 26, 2022
19 Sep 19, 2022
5 Aug 19, 2022
21 Nov 2, 2022
3 Mar 11, 2022
4 Nov 18, 2021
15 Aug 30, 2022
42 Dec 17, 2022
2.3k Jan 05, 2023
228 Oct 17, 2022
659 Jan 04, 2023
1 Oct 30, 2021
108 Jan 03, 2023
167 Oct 18, 2022
1.4k Jan 05, 2023
139 Dec 05, 2022
384 Nov 23, 2022
2 Sep 21, 2022
40 Sep 30, 2021
82 Dec 04, 2022
1.1k Dec 31, 2022
2 Sep 08, 2022
1.3k Dec 31, 2022
1 Oct 30, 2021
360 Jan 05, 2023
1 Jan 10, 2022