What is Daphne and Supervisor? How to Set Them Up in a Django + React Project

Introduction

When deploying a full-stack web application built with Django (backend) and React (frontend), you need a production-grade setup that can handle:

• HTTP and WebSocket traffic
• Background process monitoring
• High-performance static file delivery

In this guide, we’ll cover how to use Daphne and Supervisor to run Django ASGI applications and serve them with Nginx alongside a React frontend.

What is Daphne?

Daphne is an HTTP, HTTP2, and WebSocket protocol server for ASGI and ASGI-HTTP, developed as part of the Django Channels project. It’s designed to handle asynchronous communication like WebSockets and background tasks in modern Django applications.

Why use Daphne?

• Supports WebSockets, long polling, and HTTP/2
• Built for async Django apps using Channels
• Acts as an entry point to your Django ASGI application

What is Supervisor?

Supervisor is a process control system that allows you to monitor and control processes on Unix-like systems. It helps in keeping your app running even after server reboots or unexpected crashes.

Why use Supervisor?

• Automatically restarts Daphne if it crashes
• Keeps your app running on server boot
• Logs output for debugging
• Ensures high availability for production apps

Technology Stack

Step-by-Step Setup on Ubuntu (Production Server)

1. Install Daphne

Inside your Django project virtual environment:

pip install daphne

2. Run Daphne to test

Test your server manually:

daphne -b 0.0.0.0 -p 8001 your_project.asgi:application

You should now be able to access your Django backend via WebSockets on port 8001

3. Install and Configure Supervisor

sudo apt update
sudo apt install supervisor -y

Create a Supervisor config file for Daphne:

sudo nano /etc/supervisor/conf.d/daphne.conf

Paste the following config:

[program:daphne]
command=/path/to/venv/bin/daphne -u /tmp/daphne.sock your_project.asgi:application
directory=/root/your_project
autostart=true
autorestart=true
stderr_logfile=/var/log/daphne.err.log
stdout_logfile=/var/log/daphne.out.log
user=root
environment=PATH="/path/to/venv/bin",DJANGO_SETTINGS_MODULE="your_project.settings"

Start and enable:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start daphne

Daphne is now running in the background and will restart if it fails.

4. Nginx Configuration

Install Nginx:

sudo apt install nginx -y

Create config:

sudo nano /etc/nginx/sites-available/yourdomain.com

Paste this:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # Serve React
    location / {
        root /var/www/your-react-build;
        index index.html;
        try_files $uri /index.html;
    }

    # Django static
    location /static/ {
        alias /root/your_project/static/;
    }

    # Django media
    location /media/ {
        alias /root/your_project/media/;
    }

    # Proxy to Daphne (WebSocket + HTTP)
    location /backend/ {
        proxy_pass http://unix:/tmp/daphne.sock;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Enable and restart:

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. Update Django Settings

In settings.py:

ALLOWED_HOSTS = ['yourdomain.com']
CSRF_TRUSTED_ORIGINS = ['https://yourdomain.com']
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Run collectstatic:

python manage.py collectstatic

6. Test and Verify

Open browser:

Frontend: http://yourdomain.com

Backend API: http://yourdomain.com/backend/api/...

WebSocket: ws://yourdomain.com/backend/ws/...

Use browser console and network tab to confirm API calls and WebSocket connections.

7. Optional – Enable HTTPS (Let’s Encrypt)

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Conclusion

You’ve now set up a robust, scalable, and production-ready deployment of a full-stack Django + React app using:

• Daphne for ASGI support
• Supervisor to keep it alive
• Nginx for speed and security

This setup ensures high performance, real-time support, and production reliability.