Django-React-Typescript-Vite 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
│   
├── web # backend file
│   
├── frontend # React files
│   
├── web/templates # Django Templates
│   
├── web/static-dev # 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-typescript-webpack.git .

• Create Virtual Environment for Python

pip install virtualenv
python -m venv .

• Activate Virtual Environment

source bin/activate

• Install Dependencies

pip install -r requirements.txt

NOTE: To Install Latest Dependencies run command
pip install -r required.txt

• Install Dependencies (For Poetry)

poetry install

• Make Migrations

python manage.py makemigrations
python manage.py migrate

• Run Server

python manage.py runserver

For Frontend

• Install Dependencies

cd frontend/
yarn

• Run Vite

yarn dev

NOTE: To Use Django & React in With hot reload in Django Templates Run:

cd web/
python manage.py runserver

and

cd frontend/
yarn dev