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

Related tags

Djangodjango-react-tailwindcss
Overview

Django-react-tailwindcss

Django-react-tailwindcss hello world page

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
Automatic class scheduler for Texas A&M written with Python+Django and React+Typescript

Rev Registration Description Rev Registration is an automatic class scheduler for Texas A&M, aimed at easing the process of course registration by gen

Aggie Coding Club 21 Nov 15, 2022
Create a netflix-like service using Django, React.js, & More.
Create a netflix-like service using Django, React.js, & More.

Create a netflix-like service using Django. Learn advanced Django techniques to achieve amazing results like never before.

Coding For Entrepreneurs 67 Dec 8, 2022
Django React Flight Rezervation

Django Intro & Installation python -m venv venv source ./venv/Scripts/activate pip install Django pip install djangorestframework pip install python-d

HILMI SARIOGLU 2 May 26, 2022
Django React - Purity Dashboard (Open-Source) | AppSeed
Django React - Purity Dashboard (Open-Source) | AppSeed

Django React Purity Dashboard Start your Development with an Innovative Admin Template for Chakra UI and React. Purity UI Dashboard is built with over

App Generator 19 Sep 19, 2022
React.JS - Django Application Template
React.JS - Django Application Template

OTS React.JS - DJango Web Application (UNTESTED) This repository servers as a template for creating React.JS - Django Web Applications. Note that the

Darryl See Wei Shen 5 Aug 19, 2022
A Minimalistic Modern Django Boilerplate

A Minimalistic Modern Django Boilerplate This boilerplate is mainly for educational purposes. It is meant to be cloned as a starter code for future tu

Jonathan Adly 21 Nov 2, 2022
Django + NextJS + Tailwind Boilerplate

django + NextJS + Tailwind Boilerplate About A Django project boilerplate/templa

Shayan Debroy 3 Mar 11, 2022
Boilerplate Django Blog for production deployments!

CFE Django Blog THIS IS COMING SOON This is boilerplate code that you can use to learn how to bring Django into production. TLDR; This is definitely c

Coding For Entrepreneurs 26 Dec 9, 2022
Django URL Shortener is a Django app to to include URL Shortening feature in your Django Project

Django URL Shortener Django URL Shortener is a Django app to to include URL Shortening feature in your Django Project Install this package to your Dja

Rishav Sinha 4 Nov 18, 2021
Comments
  • Browsersync not working?

    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)
Owner
João Vítor Carli
João Vítor Carli
GitHub Repository
A BitField extension for Django Models

django-bitfield Provides a BitField like class (using a BigIntegerField) for your Django models. (If you're upgrading from a version before 1.2 the AP

DISQUS 361 Dec 22, 2022
PostgreSQL with Docker + Portainer + pgAdmin + Django local

django-postgresql-docker Running PostgreSQL with Docker + Portainer + pgAdmin + Django local for development. This project was done with: Python 3.9.8

Regis Santos 4 Jun 12, 2022
A UUIDField for Django

django-uuidfield Provides a UUIDField for your Django models. Installation Install it with pip (or easy_install): pip install django-uuidfield Usage

David Cramer 265 Nov 30, 2022
Modular search for Django

Haystack Author: Daniel Lindsley Date: 2013/07/28 Haystack provides modular search for Django. It features a unified, familiar API that allows you to

Haystack Search 3.4k Jan 08, 2023
a little task queue for python

a lightweight alternative. huey is: a task queue (2019-04-01: version 2.0 released) written in python (2.7+, 3.4+) clean and simple API redis, sqlite,

Charles Leifer 4.3k Dec 29, 2022
Simple tagging for django

django-taggit This is a Jazzband project. By contributing you agree to abide by the Contributor Code of Conduct and follow the guidelines. django-tagg

Jazzband 3k Jan 02, 2023
Awesome Django Markdown Editor, supported for Bootstrap & Semantic-UI

martor Martor is a Markdown Editor plugin for Django, supported for Bootstrap & Semantic-UI. Features Live Preview Integrated with Ace Editor Supporte

659 Jan 04, 2023
Example project demonstrating using Django’s test runner with Coverage.py

Example project demonstrating using Django’s test runner with Coverage.py Set up with: python -m venv --prompt . venv source venv/bin/activate python

Adam Johnson 5 Nov 29, 2021
Django based webapp pulling in crypto news and price data via api

Deploy Django in Production FTA project implementing containerization of Django Web Framework into Docker to be placed into Azure Container Services a

0 Sep 21, 2022
PEP-484 type hints bindings for the Django web framework

mypy-django Type stubs to use the mypy static type-checker with your Django projects This project includes the PEP-484 compatible "type stubs" for Dja

Machinalis 223 Jun 17, 2022
Django model mixins and utilities.

django-model-utils Django model mixins and utilities. django-model-utils supports Django 2.2+. This app is available on PyPI. Getting Help Documentati

Jazzband 2.4k Jan 04, 2023
Mobile Detect is a lightweight Python package for detecting mobile devices (including tablets).

Django Mobile Detector Mobile Detect is a lightweight Python package for detecting mobile devices (including tablets). It uses the User-Agent string c

Botir 6 Aug 31, 2022
Store events and publish to Kafka

Create an event from Django ORM object model, store the event into the database and also publish it into Kafka cluster.

Diag 6 Nov 30, 2022
PEP-484 stubs for Django

pep484 stubs for Django This package contains type stubs and a custom mypy plugin to provide more precise static types and type inference for Django f

TypedDjango 1.1k Dec 30, 2022
Sistema de tratamento e análise de grandes volumes de dados através de técnicas de Data Science

Sistema de tratamento e análise de grandes volumes de dados através de técnicas de data science Todos os scripts, gráficos e relatórios de todas as at

Arthur Quintanilha Neto 1 Sep 05, 2022
Source code for Django for Beginners 3.2

The official source code for https://djangoforbeginners.com/. Available as an ebook or in Paperback. If you have the 3.1 version, please refer to this

William Vincent 10 Jan 03, 2023
The pytest framework makes it easy to write small tests, yet scales to support complex functional testing

The pytest framework makes it easy to write small tests, yet scales to support complex functional testing for applications and libraries. An example o

pytest-dev 9.6k Jan 06, 2023
django-idom allows Django to integrate with IDOM

django-idom allows Django to integrate with IDOM, a package inspired by ReactJS for creating responsive web interfaces in pure Python.

113 Jan 04, 2023
A Django based shop system

django-SHOP Django-SHOP aims to be a the easy, fun and fast e-commerce counterpart to django-CMS. Here you can find the full documentation for django-

Awesto 2.9k Dec 30, 2022
A Django app that allows visitors to interact with your site as a guest user without requiring registration.

django-guest-user A Django app that allows visitors to interact with your site as a guest user without requiring registration. Largely inspired by dja

Julian Wachholz 21 Dec 17, 2022