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

Last update: Jan 08, 2023

Related tags

Django django-react-tailwindcss

Overview

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.

You might also like...

Automatic class scheduler for Texas A&M written with Python+Django and React+Typescript

Comments

Browsersync not working?

Hi there! First of all thanks for this boilerplate, i was looking for something just like this! One question: Is Browsersync hot reload working? I'm running a clean install of your project but nothing happens when i make changes in the code

opened by freitaseduardo 0

Releases(v0.1.0)

v0.1.0(Feb 6, 2021)

Slightly opinionated boilerplate for starting a Django project together with React front-end library and TailwindCSS CSS framework. This version is a basic scaffold for any new Django project.
Source code(tar.gz)
Source code(zip)

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

Related tags

Overview

Django-react-tailwindcss

Reasoning

Requirements

Tooling

Concepts

Installing

Caveats

You might also like...

Automatic class scheduler for Texas A&M written with Python+Django and React+Typescript

Create a netflix-like service using Django, React.js, & More.

Django React Flight Rezervation

Django React - Purity Dashboard (Open-Source) | AppSeed

React.JS - Django Application Template

A Minimalistic Modern Django Boilerplate

Django + NextJS + Tailwind Boilerplate

Boilerplate Django Blog for production deployments!

Django URL Shortener is a Django app to to include URL Shortening feature in your Django Project

Comments

Browsersync not working?

Releases(v0.1.0)

v0.1.0(Feb 6, 2021)

Owner

João Vítor Carli

Fully reponsive Chat Application built with django, javascript, materialUi, bootstrap4, html and css.

The little ASGI framework that shines. 🌟

Django And React Notes App

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites

Basic Form Web Development using Python, Django and CSS

Django + AWS Elastic Transcoder

A helper for organizing Django project settings by relying on well established programming patterns.

This is a repository for a web application developed with Django, built with Crowdbotics

Full control of form rendering in the templates.

Exploit Discord's cache system to remote upload payloads on Discord users machines

Domain-driven e-commerce for Django

Django Login Api With Python

Django Persistent Filters is a Python package which provide a django middleware that take care to persist the querystring in the browser cookies.

A tool to automatically fix Django deprecations.

Python CSS/Javascript minifier

Log and View requests made on Django

Use minify-html, the extremely fast HTML + JS + CSS minifier, with Django.

Declarative model lifecycle hooks, an alternative to Signals.

Agenda feita usando o django para adicionar eventos

Website desenvolvido em Django para gerenciamento e upload de arquivos (.pdf).