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
4 Jun 12, 2022
672 Dec 22, 2022
4 Dec 15, 2022
167 Nov 10, 2022
0 Aug 30, 2022
24 Oct 08, 2021
107 Dec 12, 2022
1 Dec 17, 2021
9 Oct 26, 2022
1.6k Dec 22, 2022
3 Aug 08, 2021
1 Jul 02, 2022
3 Apr 18, 2022
7 Feb 06, 2022
0 Sep 21, 2022
136 Dec 27, 2022
66 Dec 14, 2022
16 Sep 26, 2022
3 Sep 03, 2022
2 Jan 09, 2022