Optimal Setup for React Website with Django backend

Hi there,

While working towards deploying a website to Digital Ocean for the first time, I followed along with this tutorial to but added to my existing project as opposed to using their template:

Currently the React and Django code are in the same folder with respective sub-directories. React makes API calls to the Django view urls for the data it needs, where it needs.

For example, the website is for a mechanic’s shop and the home page Gets a logo banner image, and images of “featured” vehicles via functions like:

function loadImages(callback){
  const xhr = new XMLHttpRequest()
  const method = 'GET' // 'POST'
  const url = ""
  const responseType = "json"
  xhr.responseType = responseType, url)
xhr.onload = function() {
  callback(xhr.response, xhr.status)
// xhr.onerror = function (e) {
//   callback({"message": "invalid request"}, 400)
// }
console.log('img xhr', xhr)

React Code

<img src={`${image.images}`}/>

In the past I had used Heroku and mlab, but mlab is no longer which has me exploring other hosting options. I deployed there first for testing and things ran as expected.

I got Django deployed to a droplet I believe, but when I ‘./ runserver’ I get a white screen / empty site and can’t access the admin panel or view urls where the JSON data should be viewable.

I’m looking for guidance on the optimal way to move forward. If it’s possible to keep my setup, what else is needed? Or should I do something like separate the code and/or make separate droplets for the front and back ends?

Thank you to anyone who reads or answers for their time and assistance.


Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Hi @opticalfalicy,

Certainly, it’s not needed to separate the code in order for your Django application to work! What you’ll need to do is install Nginx which would serve as a reverse proxy and direct requests to your application on port 8000.

In that regard, If you don’t have Nginx installed, that would be the first thing to do. If you are unsure how to do so, DigitalOcean has a pretty good tutorial about this:

Now comes the best part, DigitalOcean has a couple of great tutorials on how to configure Django with Nginx as a reverse proxy which I think would be really beneficial to you in your configuration for your website. You can view all of them here:

Regards, KFSys