Django & React with Docker, Postgres, Nginx

A Bootstrapped Template of Django with React using Docker, Postgres Database and Nginx!

Embark on a comprehensive journey into the world of full-stack development! Join us for an in-depth exploration of integrating Django, React, Docker, Postgres, and Nginx. This walkthrough offers a step-by-step guide, empowering you to master the seamless integration of these powerful technologies. Unlock the potential of this robust stack and elevate your development skills to build scalable, modern web applications.

📚 Stack:

• Python - Python is a programming language that lets you work quickly and integrate systems more effectively.
• Django - Django makes it easier to build better web apps more quickly and with less code.
• Typescript - JavaScript with syntax for types.
• React - The library for web and native user interfaces.
• Docker - Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code.
• Nginx - Advanced Load Balancer, Web Server, & Reverse Proxy.
• Postgres DB - The World's Most Advanced Open Source Relational Database.

📸 Screenshots:

• Django Admin Panel:

• Nginx:

📁 Project structure:

$PROJECT_ROOT
│  
├── apps/backend  # Django Backend
│  
├── apps/docker  # Docker files for backend, frontend, nginx
│  
├── apps/frontend  # React App.
│   
├── apps/backend/requirements.txt # Python Requirements
│
├── apps/backend/manage.py # Run Django Commands
│
├── apps/frontend/package.json # npm commands
│
├── docker-compose.yaml # compose file for services

🏆Getting Started:

• Clone repository

mkdir ~/Dev/dj-react -p
cd ~/Dev/dj-react
git clone https://github.com/codingforinnovations/django-react-postgres .

Docker Setup:

• Create .env file: Add Your Credentials .env from sample.env:

POSTGRES_DB=root
POSTGRES_USER=root
POSTGRES_PASSWORD=root

DJANGO_SUPERUSER_USERNAME=admin
DJANGO_SUPERUSER_PASSWORD=admin
[email protected]

Get your Secret key (or) Passwords from:

python -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'

• Start Docker service

docker compose up --build

Open localhost or 0.0.0.0 in your favourite browser :)

Manual Setup:

• Start DB:

cd ~/Dev/dj-react
docker compose up db

• Set Up for Python as Backend:

cd ~/Dev/dj-react
python3.10 -m pip install virtualenv
python3.10 -m virtualenv . 
source bin/activate
pip install -r apps/backend/requirements.txt

• Run Migrations & Create a Super User:

cd ~/Dev/dj-react/apps/backend
python manage.py makmigrations
python manage.py migrate
python manage.py superuser

• Run Server:

cd ~/Dev/dj-react/apps/backend
python manage.py runserver

Open localhost:8000/admin in your favourite browser :)

• Set Up for React as Frontend:

cd ~/Dev/dj-react/apps/frontend
npm install

• Run Server:

cd ~/Dev/dj-react/apps/frontend
npm run dev

Open localhost:3000 in your favourite browser :)