Unable to Serve React Frontend with Django Backend on OpenLiteSpeed - and django error at Root URL

[ubaid]

Hi everyone,

I am currently facing an issue while serving a React frontend and a Django backend using OpenLiteSpeed (OLS). Previously, I was using Django to handle both the backend and the frontend (via Django templates), and it was working perfectly. Recently, I upgraded the frontend to React and set up the project with separate frontend and backend directories. However, after deploying it on OLS, I keep encountering a 404 error when visiting the root URL (prizecho.com).

Here are the details of my setup:

Project Setup

• Backend (Django): Located in /var/www/html/prizecho_backend, this contains all Django-related files.
  • The backend works perfectly when accessing API endpoints such as http://prizecho.com/api/categories/ or http://prizecho.com/api/featured-items/, returning correct responses.
• Frontend (React): I built the React app and copied the build folder contents to /var/www/html/prizecho-frontend/. This is where I want the root URL prizecho.com to serve the React app.
• Virtual Environment: The virtual environment for Django is located at /var/www/html/bin/ and /var/www/html/lib/.

This is a sample of how my project runs on the localhost development on Windows vscode.
"GET /api/categories/ HTTP/1.1" 200 73
"GET /api/featured-items/ HTTP/1.1" 200 329
"GET /api/categories/ HTTP/1.1" 200 73
"GET /api/featured-items/ HTTP/1.1" 200 329
"GET /media/items/Screenshot_1.png HTTP/1.1" 304 0
"POST /admin/login/?next=/admin/ HTTP/1.1" 200 4326

Request for Help
I would appreciate any guidance on how to properly set up OpenLiteSpeed to serve my React frontend and Django backend. Specifically:

• How do I correctly serve the React frontend at the root (/) while Django handles the /api/ routes or any other recommended way?
• Are there specific configurations I’m missing in the virtual host settings?
• Is there a better way to set up the proxy for API requests between the React frontend and the Django backend?
• Is there any other way to serve both Django and React on OLS?

Any help would be much appreciated! I appreciate any help you can provide.

Best regards,
ubaid

 

[Cold-Egg]

Document root point to /var/www/html for frontend, and set up a Django app context with URL /api. If the front end is still not working, you might want to share the configs here.