Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phoenixdev0117/django-react-postgressql
This project is for Django + React development template
https://github.com/phoenixdev0117/django-react-postgressql
django docker nginx postgresql react
Last synced: 4 days ago
JSON representation
This project is for Django + React development template
- Host: GitHub
- URL: https://github.com/phoenixdev0117/django-react-postgressql
- Owner: phoenixdev0117
- License: mit
- Created: 2024-12-27T19:33:05.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-01-08T07:36:16.000Z (22 days ago)
- Last Synced: 2025-01-25T18:15:02.604Z (4 days ago)
- Topics: django, docker, nginx, postgresql, react
- Language: Python
- Homepage:
- Size: 290 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.python.org/) - Python is a programming language that lets you work quickly and integrate systems more effectively.
- [Django](https://www.djangoproject.com/) - Django makes it easier to build better web apps more quickly and with less code.
- [Typescript](https://www.typescriptlang.org/) - JavaScript with syntax for types.
- [React](https://react.dev/) - The library for web and native user interfaces.
- [Docker](https://www.docker.com/) - 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](https://www.nginx.com/) - Advanced Load Balancer, Web Server, & Reverse Proxy.
- [Postgres DB](https://www.postgresql.org/) - 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
```bash
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`:
```bash
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
python -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'
```
- Start Docker service
```bash
docker compose up --build
```
_Open [localhost](http://localhost) or [0.0.0.0](http://0.0.0.0) in your favourite browser :)_
### Manual Setup:
- Start DB:
```bash
cd ~/Dev/dj-react
docker compose up db
```
- Set Up for Python as Backend:
```bash
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:
```bash
cd ~/Dev/dj-react/apps/backend
python manage.py makmigrations
python manage.py migrate
python manage.py superuser
```
- Run Server:
```bash
cd ~/Dev/dj-react/apps/backend
python manage.py runserver
```
Open [localhost:8000/admin](http://localhost:8000/admin) in your favourite browser :)
- Set Up for React as Frontend:
```bash
cd ~/Dev/dj-react/apps/frontend
npm install
```
- Run Server:
```bash
cd ~/Dev/dj-react/apps/frontend
npm run dev
```
Open [localhost:3000](http://localhost:3000) in your favourite browser :)