FULL-STACK CLOUD DEPLOYMENT (FREE Version)

React + Django + PostgreSQL

Full stack cloud deployment

GOAL

Convert your localhost project into a live internet application.

We will deploy:

WHY THIS STACK IS BEST

• Free tiers available
• Very little DevOps knowledge needed
• GitHub-based deployment
• Used by startups and indie developers
• Easy to debug
• Deploy full-stack apps in under 1 hour

SIMPLE ARCHITECTURE

React Frontend (Vercel)
        ↓ API Calls
Django Backend (Render)
        ↓
PostgreSQL Database

PHASE 1 — BACKEND DEPLOYMENT (DJANGO)

STEP 1 — Install Deployment Packages

Run:

pip install gunicorn whitenoise dj-database-url psycopg2-binary django-cors-headers

WHY THESE PACKAGES?

STEP 2 — Create requirements.txt

Run:

pip freeze > requirements.txt

STEP 3 — Create Procfile

Create file:

Procfile

Add:

web: gunicorn project_name.wsgi:application

WHY PROCFILE?

Cloud platforms use Procfile to understand:

• how to start your Django application

STEP 4 — Update settings.py

ALLOWED_HOSTS

ALLOWED_HOSTS = ['*']

Why?

Without this:

DisallowedHost Error

occurs during deployment.

STEP 5 — Configure Static Files

Add:

STATIC_ROOT = BASE_DIR / "staticfiles"

Why?

Django admin CSS/images break in production without static collection.

STEP 6 — Configure CORS

Install already done earlier.

Now add:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

And:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Then:

CORS_ALLOWED_ORIGINS = [
    "https://your-frontend.vercel.app"
]

WHY CORS IS IMPORTANT

Your frontend and backend run on different domains:

• React → Vercel
• Django → Render

Browsers block requests unless Django explicitly allows them.

STEP 7 — Configure PostgreSQL Database

OLD DATABASE (SQLite)

DATABASES = {
   'default': {
       'ENGINE': 'django.db.backends.sqlite3',
       'NAME': BASE_DIR / 'db.sqlite3',
   }
}

NEW DATABASE (PostgreSQL)

Install already done:

pip install dj-database-url psycopg2-binary

Now update settings.py:

import dj_database_url

DATABASES = {
   'default': dj_database_url.config(
       conn_max_age=600
   )
}

WHY THIS IS BETTER

Cloud platforms provide a DATABASE_URL automatically.

dj-database-url converts it into Django database configuration.

STEP 8 — Create build.sh

Create:

build.sh

Add:

#!/usr/bin/env bash

pip install -r requirements.txt
python manage.py migrate
python manage.py collectstatic --noinput

WHY build.sh?

Automatically:

• installs dependencies
• runs migrations
• collects static files during deployment

STEP 9 — Make build.sh Executable

Run locally:

chmod +x build.sh

STEP 10 — Push Code to GitHub

Run:

git add .
git commit -m "Deployment ready"
git push origin main

PHASE 2 — DEPLOY DJANGO ON RENDER

Go to:

Render

CREATE WEB SERVICE

1. New Web Service
2. Connect GitHub repository
3. Select your Django repository

BUILD COMMAND

./build.sh

START COMMAND

gunicorn project_name.wsgi:application

PHASE 3 — CREATE POSTGRESQL DATABASE

Inside Render:

1. New +
2. PostgreSQL
3. Fill details:

• Database name
• User
• Region
• Free plan

COPY DATABASE_URL

Render provides:

postgresql://user:password@host/dbname

Example:

postgresql://clinicuser:abc123@dpg-xxxxx.render.com/clinicdb

ADD ENVIRONMENT VARIABLES

Open your Render Web Service:

Environment → Add Variables

Add:

DATABASE_URL=your_postgresql_url
DEBUG=False
SECRET_KEY=your_secret_key

IMPORTANT: NEVER HARDCODE SECRETS

Do NOT write:

• passwords
• API keys
• secret keys
• database URLs

inside code.

Use environment variables instead.

PHASE 4 — DEPLOY REACT FRONTEND

Go to:

Vercel

STEP 1 — Prepare React App

Run:

npm install
npm run build

STEP 2 — Add Frontend Environment Variable

Create:

VITE_API_URL=https://your-backend.onrender.com

STEP 3 — Push Frontend to GitHub

git add .
git commit -m "Frontend deployment"
git push origin main

STEP 4 — Deploy on Vercel

1. New Project
2. Import GitHub repo
3. Framework auto-detected
4. Click Deploy

CONNECT FRONTEND TO BACKEND

Example:

axios.get(`${import.meta.env.VITE_API_URL}/api`)

FINAL RESULT

IMPORTANT FREE TIER NOTE

Render free services may “sleep” after inactivity.

First request may take: 30–60 seconds.

This is normal for free hosting.