DEV Community: grbeno

Real-Time AI Chat with Django and React: Deployment

grbeno — Wed, 04 Jun 2025 15:40:47 +0000

In the last part, I will introduce how to deploy a Real-Time AI Chat using Django Channels and React on Railway.

I'll update the base application with the next steps, that are necessary for production use:

🔸 Using environment variables
🔸 Changing In-memory Channels Layer to Redis Channel Layer
🔸 Adding STATIC_ROOT to Django settings using React as static files
🔸 Creating a Dockerfile for the app and a docker-compose.yml for Redis

I'll deploy the chat application to the Railway platform, which is relatively cheap and easy to use.

Create an account on Railway: You can do that on the Railway website, but I would be thankful if you used my referral link here.

✨ Features

✅ Asynchronous chat (Channels, WebSockets)
✅ AI/LLM API consuming (OpenAI)
✅ Chat memory using Redis layer
✅ Production: Docker, Railway

🧰 Prerequisites

🔹 Docker
🔹 GitHub account
🔹 Railway account

GitHub repository: https://github.com/grbeno/aichat

Environment variables

Add SECRET_KEY, DEBUG, ALLOWED_HOSTS to the .env file.

Update the config/settings.py with the following lines.

# config/settings.py

from environs import Env

# Load the environment variables
env = Env()
env.read_env()

# config/settings.py

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = env.str("SECRET_KEY")

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = env.bool("DEBUG", default=True)

ALLOWED_HOSTS = env.list("ALLOWED_HOSTS")

# .env

OPENAI_API_KEY=<your_api_key>
SECRET_KEY=<your_secret_key>
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1

Change In-memory Channels Layer to Redis Channel Layer

As the Django Channels documentation says:

channels_redis is the only official Django-maintained channel layer supported for production use.

According to this, the first step is installing the dependencies, then updating the config/settings.py and chat/chat_api.py files.

pip install redis channels_redis

Use Redis Channel Layer instead of In-memory Channel Layer, so you need to update config/settings.py and chat/chat_api.py.

# config/settings.py

# Channels
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
            "CONFIG": {
                "hosts": [(env.str('REDISHOST', default="redis"), 6379)],
             },           
        }    
    }

I marked with comments # Redis Channel Layer where I changed the code:

# chat/chat_api.py

from openai import OpenAI
from environs import Env
import redis  # Redis Channel Layer
import json  # Redis Channel Layer

# Load the environment variables
env = Env()
env.read_env()

client = OpenAI()
client.api_key=env.str("OPENAI_API_KEY")

class AiChat():

    # Redis Channel Layer
    _redis_client = redis.Redis(host='redis', port=6379, db=0)

    def __init__(self, prompt: str, model: str, channel: str) -> None:
        self.prompt = prompt
        self.model = model
        self.channel = channel

        # Redis Channel Layer

        # Check if the channel exists in Redis
        if not self._redis_client.exists(channel):
            initial_data = [{"role": "system", "content": "You are helpful and friendly. Be short but concise as you can!"}]
            self._redis_client.set(channel, json.dumps(initial_data))

        # Retrieve the conversation from Redis
        conversation_data = self._redis_client.get(channel)
        self.conversation = json.loads(conversation_data) if conversation_data else initial_data

    def chat(self) -> str:
        if self.prompt:
            # The conversation is going on ...
            # Adding prompt to chat history
            self.conversation.append({"role": "user", "content": self.prompt})
            # Redis Channel Layer
            self._redis_client.set(self.channel, json.dumps(self.conversation))
            # The OpenAI's chat completion generates answers to your prompts.
            completion = client.chat.completions.create(
                model=self.model,
                messages=self.conversation
            )
            answer = completion.choices[0].message.content
            # Adding answer to chat history
            self.conversation.append({"role": "assistant", "content": answer})
            # Redis Channel Layer
            self._redis_client.set(self.channel, json.dumps(self.conversation))
            return answer

Checking host and protocol dynamically

Use the get_host() method and HTTP_X_FORWARDED_PROTO in Django for yielding the current host (development or production).

In order to implement this,

Complete the React template view
Add SECURE_PROXY_SSL_HEADER to the config/settings.py
Add WS_URL to frontend/index.html
Update the websocket constructor

# backend/views.py

from django.views.generic import TemplateView

# React home page
class React(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)

        # Check for forwarded protocol (for proxies like Railway)
        forwarded_proto = self.request.META.get('HTTP_X_FORWARDED_PROTO')
        is_secure = self.request.is_secure() or forwarded_proto == 'https'

        # Set WS/WSS protocol
        ws_protocol = 'wss://' if is_secure else 'ws://'
        context['WS_URL'] = f"{ws_protocol}{self.request.get_host()}"

        return context

# config/settings.py

# Add this to the end
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

<!-- frontend/index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script> 
      window.WS_URL = "{{ WS_URL|safe}}";
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

// frontend/src/AI/Chat.jsx

//Update websocket constructor
const websocket = new WebSocket(window.WS_URL + '/ws/chat/');

Preparing for deployment

Some preparations are still needed before you build the Docker image and start deploying the application.

pip install whitenoise twisted[tls,http2]

The whitenoise is needed for serving static files.
The tls and http2 are needed for the Daphne ASGI server in Railway.

After the installation add whitenoise to MIDDLEWARE list.

# config/settings.py

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

The collectstatic command (runs during deployment) will collect static files into the staticfiles/ directory which is set by STATIC_ROOT.

# config/settings.py

STATIC_URL = 'assets/'

STATIC_ROOT = str(BASE_DIR.joinpath('staticfiles'))

STATICFILES_DIRS = [ str(BASE_DIR.joinpath('static', 'assets')) ]

Dockerfile

Before building the Docker image, we need to create or update the requirements.txt. The dependencies and their versions listed in this text file will be installed in the Docker container.

pip freeze > requirements.txt

Create a Dockerfile in the project directory.

# Pull base image
FROM python:3.11-slim-bullseye

# Set work directory
WORKDIR /app

# Install dependencies
COPY ./requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy project
COPY . /app/

Inside the Dockerfile, set the work directory, install the django dependencies and finally copy the other files that aren't ignored by the .dockerignore.

Dockerignore

If you are using a virtual environment to develop, test your application or build React outside Docker, you may have some files that you don't need in Docker. In this case use dockerignore - you can find one in the attached repo.

Docker Compose

Create two docker-compose yaml files. One for development locally, and one for production in Railway.

docker-compose-dev.yml

services:
  backend:
    build: .
    container_name: ws_aichat
    command: >
      sh -c "
      python manage.py collectstatic --noinput &&
      python manage.py runserver 0.0.0.0:8000
      "
    ports:
      - 8000:8000
    env_file:
      - ./.env
    depends_on:  
      - redis

  redis:
    image: redis:latest
    container_name: ws_aichat_redis
    command: redis-server /usr/local/etc/redis/redis.conf
    volumes:
      - ./redis.conf:/usr/local/etc/redis/redis.conf
    ports:
      - '6379:6379'

docker-compose-railway.yml

services:
  redis:
    image: redis:latest
    container_name: ws_aichat_redis
    command: redis-server /usr/local/etc/redis/redis.conf
    volumes:
      - ./redis.conf:/usr/local/etc/redis/redis.conf
    ports:
      - '6379:6379

Running on Docker in development mode

First step is opening up Docker Desktop, then building the Dockerfile,

docker build .

Running docker-compose in development mode on https://localhost:8000/ws/chat/.

docker-compose -f docker-compose-dev.yml up --build

Removing containers, if needed:

docker-compose -f docker-compose-dev.yml down

Git, GitHub

First step is to create a GitHub repository.

Initialize the repo in your project's directory. Make sure you are already there or change to it using the command cd <your-project-path>.

git init

Add the Github repository's url.

git remote add origin <https://repo-url/>

Add the files to commit. Use .gitignore for listing files and directories you don't want to commit.

git add .

Commit and write a custom message that is related to the current task.

git commit -m 'your-message'

Push the project to the GitHub repo.

git push -u origin main

Deploying to Railway

Create a new project using the "New" button and select the GitHub repository (Deploy from GitHub repo) that you want to deploy. After that, the deployment process will start.

Drag from your file browser and drop docker-compose-railway.yml - it should contain only the Redis service - onto the canvas.

Generate a domain (you can customizing it) on 8080 port.

Copy the domain and set the value of the ALLOWED_HOSTS variable.

Setup also the other environment variables (+ New Variable): OPENAI_API_KEY, SECRET_KEY. You can find "Variables" by clicking on the "web" service.

Clicking on "Settings" you can find "Deploy/Start Command". Add daphne -b 0.0.0.0 -p 8080 config.asgi:application to it.

Click on the "Deploy" button and after building and deploying, you can run the web application with its URL in the web browser.

Conclusion

🚀 First, I had to find a solution for the context window of chat and for a distributed real-time app, that’s why I have chosen Django Channels' memory layers. It is worth noting, this package is more versatile when it comes to asynchronous programming, such as high concurrency scenarios and robust I/O operations, for example.

🎯 Finally, my purpose was to create a simple asynchronous chatbot application with basic features, assuming that it will be eligible for deployment, scaling up and building enhanced features.

Thank you for your attention! I hope the series was useful for you. I tried to be as understandable and concise as I could. Please let me know if you have any issues or questions. I will try to help and respond as soon as possible.

Real-Time AI Chat with Django and React: Development

grbeno — Tue, 28 Jan 2025 17:43:19 +0000

Building on the template presented in the previous part, now in the second part I'd like to show you a web application example with an LLM based chatbot.

I will demonstrate the chatbot using the GPT-4o-mini model from OpenAI, but feel free to choose another model or provider. In this case, check the documentation for how to use these in Python.

Features

✅ Real-time asynchronous chat (Channels, WebSockets)
✅ AI/LLM API consuming (OpenAI)
✅ Chat memory (In-memory Channel Layer)

1. Backend

Open the CLI/terminal!

Well, assuming you already have a basic Django application using React as the frontend, you should now change to the project directory and activate the virtual environment if it is not activated at this moment.

cd <project_path>

venv/Scripts/activate

Let's start developing our new application

Create the chat app.

python manage.py startapp chat

Install the necessary packages.

pip install environs openai channels daphne

You have to add the chat app and the recently installed packages, channels and daphne, to the INSTALLED_APPS in the config/settings.py file. Daphne should be listed right before django.contrib.staticfiles.

# config/settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'daphne',  # adding daphne!
    'django.contrib.staticfiles',
    'channels',
    'backend',
    'chat',  # adding chat!
]

You need to have an API key to access an LLM. My choice now is the GPT-4o-mini model, so I will generate a key on OpenAI.

# .env

OPENAI_API_KEY=<your_api_key>

chat/chat_api.py

Create a file for the AiChat class, which calls the model via API.

The AiChat class should look like this:

# chat/chat_api.py

from openai import OpenAI
from environs import Env

# Load the environment variables
env = Env()
env.read_env()

client = OpenAI()
client.api_key=env.str("OPENAI_API_KEY")

class AiChat():

    _channels = {}  # In-Memory Channel Layer

    def __init__(self, prompt: str, model: str, channel: str) -> None:
        self.prompt = prompt
        self.model = model
        self.channel = channel

        ## In-Memory Channel Layer
        if self.channel not in AiChat._channels:
            AiChat._channels[self.channel] = [
                {"role": "user", "content": "You are helpful and friendly assistant. Be short but concise as you can!"},
            ]
        self.conversation = AiChat._channels[self.channel]

    def chat(self) -> str:
        if self.prompt:
            # The conversation is going on ...
            # Adding prompt to chat history
            self.conversation.append({"role": "user", "content": self.prompt})
            # The OpenAI's chat completion generates answers to your prompts.
            completion = client.chat.completions.create(
                model=self.model,
                messages=self.conversation
            )
            answer = completion.choices[0].message.content
            # Adding answer to chat history
            self.conversation.append({"role": "assistant", "content": answer})
            return answer

The __init__ constructor has three parameters, which come from the Websocket Consumer (see below). The first two are straightforward, and the third one refers to the channel name.

Consumers will generate a unique channel name for themselves, and start listening on it for events. Channel's documentation

Another important part of the AiChat class is the In-Memory Channel Layer, which is necessary for the conversation to be retrievable from memory, although not recommended for production use.

As you might have noticed, the AiChat has one method "chat" which is responsible for handling the conversation (by imported OpenAI) if the prompt is received successfully from the client.

The next step is adding CHANNEL_LAYERS to the end of the config/settings.py file.

# config/settings.py

# Channels
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",          
     }    
 }

chat/views.py

Now, let's see the Websocket Consumer mentioned before.

# chat/views.py

import json
from channels.generic.websocket import AsyncWebsocketConsumer
from .chat_api import AiChat

class ChatConsumer(AsyncWebsocketConsumer):

    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        print('Disconnected:', close_code)

    async def receive(self, text_data):
        # text data from the client
        text_data_json = json.loads(text_data)
        prompt = text_data_json["prompt"]
        # choose a model 
        model = 'gpt-4o-mini' 

        # Response
        model_response = AiChat(prompt, model, self.channel_name)  # instantiate
        response = model_response.chat()  # run the model

        # Send the response to the client
        await self.send(text_data=json.dumps({
            'prompt': prompt,
            'response': response,
        }))

Our custom ChatConsumer class inherits all functionalities defined in the channel's AsyncWebsocketConsumer.

ChatConsumer establishes connection, handles disconnection and receives data - only prompt in this case - from the client. Finally, it sends the prompt and the response which is generated by the AiChat, back to the client side.

Let's now take a look at the other files in Django. You have to create chat/routing.py and update config/asgi.py and config/settings.py.

chat/routing.py

# chat/routing.py

from django.urls import re_path
from . import views

websocket_urlpatterns = [
    re_path(r"ws/chat/$", views.ChatConsumer.as_asgi(), name="chat"),
]

config/asgi.py

# config/asgi.py

import os

from django.core.asgi import get_asgi_application  
from channels.routing import ProtocolTypeRouter, URLRouter  
from channels.auth import AuthMiddlewareStack
from chat.routing import websocket_urlpatterns

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')  

application = ProtocolTypeRouter({  
  "http": get_asgi_application(),  
  "websocket": AuthMiddlewareStack(  
        URLRouter(  
            websocket_urlpatterns  
        )  
    ),  
})

config/settings.py

Finally, there is one more update in the settings file. Add ASGI and uncomment WSGI in case it might be needed later in the development process.

# config/settings.py

# WSGI_APPLICATION = 'config.wsgi.application'
ASGI_APPLICATION = 'config.asgi.application'

2. Frontend

After change to frontend/ install Marked which is formating the response on the user interface.

cd frontend

npm install marked

src/AI/Chat.jsx

Create AI directory and Chat.jsx inside src.

The WebSocketChat React component establishes a connection between the frontend and backend using WebSocket, sending new prompts (inputMessage) to the backend while keeping the context with the prompts and responses (prevMessages) that were involved previously.

The component returns an interface that includes a main wrapper where you can see the websocket connection status, the chat between the user and the AI and the text input for sending prompts.

// src/AI/Chat.jsx

import React, { useEffect, useState, useCallback, useRef } from 'react';
import { marked } from 'marked';
import './Chat.css';

const WebSocketChat = () => {
    const [responseMessages, setResponseMessages] = useState([]);
    const [inputMessage, setInputMessage] = useState('');
    const [connectionStatus, setConnectionStatus] = useState('Disconnected');
    const socketRef = useRef(null);

    // apply markdown to response messages
    const createMarkup = (markdown) => {
        return { __html: marked(markdown) };
    };

    // Initialize WebSocket connection
    useEffect(() => {
        const websocket = new WebSocket('ws://localhost:8000/ws/chat/');
        socketRef.current = websocket;

        websocket.onopen = () => {
            console.log('Connected to WebSocket');
            setConnectionStatus('Connected');
        };

        websocket.onclose = () => {
            console.log('Disconnected from WebSocket');
            setConnectionStatus('Disconnected');
        };

        websocket.onerror = (error) => {
            console.error('WebSocket error:', error);
            setConnectionStatus('Error');
        };

        // Listen for messages
        socketRef.current.addEventListener('message', (event) => {
            const response = JSON.parse(event.data);
            setResponseMessages(prevMessages => [...prevMessages, { prompt: response.prompt, message: response.response }]);
        });

        // Cleanup on component unmount
        return () => {
            websocket.close();
        };

    }, []);

    // Send message handler
    const sendMessage = useCallback(() => {
        if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN && inputMessage.trim()) {
            socketRef.current.send(JSON.stringify({
                prompt: inputMessage,
            }));
            setInputMessage('');
        }
    }, [inputMessage]);

    // Handle pressing Enter key in the input field
    const handleKeyDown = useCallback((event) => {
        if (event.key === 'Enter') {
            sendMessage();
        }
    }, [sendMessage]);

    return (
        <div className="wrapper">
            <div>
                <h2 style={{ color: '#03101d', fontFamily: "sans-serif" }}>AI Chat</h2>
            </div>

            <div className={`status ${
                connectionStatus === 'Connected' ? 'connected' : 
                connectionStatus === 'Error' ? 'error' : 'disconnected'
            }`}>
                Websocket status: {connectionStatus}
            </div>

            {responseMessages.map((item, index) => (
                <div key={index} className="messages">
                    <div>
                        <span className="prompt">{item.prompt}</span>
                        <span className="response" dangerouslySetInnerHTML={createMarkup(item.message)} />
                    </div>
                </div>
            ))}

            <div className="input-wrapper">
                <input
                    type="text"
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Type a message..."
                />
                <button
                    onClick={sendMessage}
                    disabled={!socketRef.current || socketRef.current.readyState !== WebSocket.OPEN}
                >
                    Send
                </button>
            </div>
        </div>
    );
};

export default WebSocketChat;

src/AI/Chat.css

/* src/AI/Chat.css */

input {
    width: 30%;
    height: 70px;
    padding: 0.5em;
    border: none;
    font-size: 1em;
}

button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 31%;
    padding: 0.5em;
    margin-top: 2.0em;
    background-color: rgba(29, 60, 107, 0.5);
    color: white;
    border: none;
    font-size: 1em;
    cursor: pointer;
}

/* classes */

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.messages {
    display: flex;
    flex-direction: column;
    width: 32%;
    margin: 0.7em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    line-height: 1.3em;
}

.prompt {
    display: block;
    padding: 0.7em;
    margin: 0.5em;
    color: white;
    background-color: rgb(52 142 59 / 70%);
}

.response {
    display: block;
    padding: 0.7em;
    margin: 0.5em;
    background-color: rgb(255 255 255 / 50%);
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.status {
    margin: 0.6em;
    font-size: 1.3em;
}

.connected {
    color: rgb(9, 11, 139);
}

.disconnected {
    color: rgb(224, 13, 41);
}

src/provider.jsx

The Provider component sets up the routing. The /ws/chat/ renders the WebSocketChat component and / the main page, which is rendered by the App component.

Make sure you are still in the frontend directory and install the react-router-dom.

npm install react-router-dom

// src/provider.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import App from './App';
import WebSocketChat from './AI/Chat';

const Provider = () => {
    return (
        <Router>
            <Routes>
                <Route path="ws/chat/" element={<WebSocketChat />} />
                <Route path="/" element={<App />} />
            </Routes>
        </Router>
    );
};

export default Provider;

src/main.jsx

// src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Provider from './provider'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider />
  </StrictMode>,
)

The last steps

npm run build

Change back to the project directory and run the app with your browser.

cd ..

python manage.py runserver

http://localhost:8000/ws/chat

You can now chat with your new AI chatbot! 🎉

Thank you for your attention so far, let's meet in the next part where we will deploy our newly created AI-Chat on Railway. ☺️

Real-Time AI Chat with Django and React: Template

grbeno — Mon, 13 Jan 2025 23:37:28 +0000

🚌 In the first part of the series I will guide you through the step-by-step process of creating a basic web application using Django as the back-end and React as the front-end.

This application will be the template for our asynchronous AI chat implementation presented in the second and third parts.

✅ If you're just looking for a fast and easy solution to run Django and React together on a single port without proxy configuration, you can use this guide separately from the other parts.

📖 In this series, you can learn about how to build an asynchronous real time AI chat web application using Django Channels and WebSocket. Finally, in the third part of the series we will deploy the web application on Railway.

Python & Node

🔸 The application that is the subject of this tutorial is implemented with Python 3.11.5 and Node 20.10.0.

If you didn't install Python yet, check this website.

Since I use Windows, I also needed nvm-windows for the installation of Node. Follow the instructions and choose installer or manual installation.

After you successfully install nvm-windows, you can add Node. Use a CLI or terminal.

nvm install <node_version>

Select the latest installed version

nvm use newest

Check Node version

node -v

1. Setting up Django as the back-end

Find a place and create a directory for the project with the mkdir command. I named this my-webapp, but you can choose another name of course.

mkdir my-webapp

Change directory to this new one.

cd my-webapp

Setup virtual environment

Create virtual environment for the project using venv.

python -m venv venv

Activate the virtual environment.

venv\Scripts\activate

After the activation command, you should now see something similar:

(venv) PS C:\Apps\my-webapp>

(venv) means virtual environment is activated. Make sure to always be active during the development process. If you want to exit from venv, just run deactivate command.

Install Django and create a project

pip install django

django-admin startproject config .

python manage.py runserver

Open http://localhost:8000/ in your web browser.

Create Django application

Press Ctrl+C and continue in the command line interface.

I name the Django app backend.

python manage.py startapp backend

Update `config/settings.py`

Don't forget to add the new app to the list of installed apps in the settings.py.

# config/settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'backend',  # I've just added
]

2. Setting up React as the frontend

Create React application with Vite. The directory for React files will be frontend but you can choose another name as well.

npm create vite@latest frontend

During the process, you will be asked which language and framework you would like to use. You can choose between JavaScript and TypeScript as the development language and several frontend libraries/frameworks.

As you can see on the image, I have selected here React and JavaScript.

Run the suggested commands to check if the installation was successful.

cd frontend

npm install

npm run dev

Click on the host's link http://localhost:5173/, then you should see this:

Update files

In order to serve static files from React to Django, you should update settings.py in Django according to this:

# config/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [str(BASE_DIR.joinpath('static')),],  # add static directory
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# config/settings.py

STATIC_URL = 'assets/'

STATICFILES_DIRS = [ str(BASE_DIR.joinpath('static', 'assets')) ]

The next step is to create a Django view to render the index.html template, which is an HTML template file and can be developed with React instead of the default Django templating system.

# backend/views.py

from django.views.generic import TemplateView

# React home page
class React(TemplateView):
    template_name = 'index.html'

# config/urls.py

from django.contrib import admin
from django.urls import path, re_path
from backend.views import React

urlpatterns = [
    path('admin/', admin.site.urls),

    # React
    re_path(r'^.*', React.as_view(), name='frontend'),
]

Finally, you should set the correct location of static files also in React.

// frontend/vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  // This ensures that when you run npm run build, Vite places the CSS and JS files in the correct location that Django expects.

  build: {
    outDir: '../static',  // Output to Django's static folder
    assetsDir: 'assets',  // Put all static assets in an 'assets' directory
  },

})

Customizing the welcome page

I delete the files from the src/ directory except for App.jsx App.css main.jsx. After that, you can customize the mentioned files. The welcome page in my case is a simple "Hello World" page, which is enough to start the app for now.

// frontend/src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// frontend/src/App.jsx

import './App.css';

function App() {
  return (
    <div className="App">
     <h1> Hello World </h1>
    </div>
  );
}

export default App;

As you can see, the design is very minimal. Feel free to upgrade it to a cooler one.

/* src/App.css */

body {
  background: #d7dded;
}

.App {
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  color: #0c1823;
}

Build the React app after the files are updated.

npm run build

If you encounter the next warning message:

(!) outDir C:\DEV\blog\django-react\static is not inside project root and will not be emptied.
Use --emptyOutDir to override.

Update the src/package.json file with "build": "vite build --emptyOutDir"

3. Hello World

The last step is to change back to the project path, and run the local server.

cd ..

python manage.py runserver

🚀 Open http://localhost:8000/ in your web browser.

🎉 You have now a basic web application, on which you can develop something fascinating. If you stay with me in the next part too, you will see how to add an asynchronous AI-chat with context window to our template. 😊