Django-React Starter Template

Stack

• React - A JavaScript library for building user interfaces.
• Django - Django makes it easier to build better web apps more quickly and with less code.
• Vite - Next Generation Frontend Tooling
• Typescript - JavaScript with syntax for types.

Project structure

$PROJECT_ROOT
│   
├── src/backend # backend file
│   
├── src/ui # React files
│   
├── src/templates # Django Templates
│   
├── src/staticfiles # Django Static Files

---

Get the Code

For Backend

• Clone Repo

mkdir django-react
cd django-react
git clone https://github.com/Arvind-4/django-react.git .

• Create Virtual Environment for Python

python3.10 -m pip install virtualenv
python3.10 -m virtualenv .

• Activate Virtual Environment

source bin/activate

• Install Dependencies

cd src
pip install -r requirements.txt

• Install Dependencies (For Poetry)

cd src
poetry install

• Make Migrations

cd src
python manage.py makemigrations
python manage.py migrate

• Run Server

cd src
python manage.py runserver

For Frontend

• Install Dependencies

cd src/ui
pnpm i

• Run Vite

cd src/ui
pnpm dev

• For production

cd src/ui
pnpm collectstatic