Question

Optimal Setup for React Website with Django backend

Posted February 18, 2021 653 views
DjangoDeploymentReact

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:

https://www.digitalocean.com/community/tutorials/how-to-deploy-django-to-app-platform

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 = "http://127.0.0.1:8000/images/"
  const responseType = "json"
  xhr.responseType = responseType
xhr.open(method, url)
xhr.onload = function() {
  callback(xhr.response, xhr.status)
}
// xhr.onerror = function (e) {
//   callback({"message": "invalid request"}, 400)
// }
console.log('img xhr', xhr)
xhr.send()
}


.....................
React Code
.....................


<img src={`http://127.0.0.1:8000/${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 ’./manage.py 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.

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.

×
Submit an Answer
1 answer

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:

https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04

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:

https://www.digitalocean.com/community/tutorial_collections/how-to-set-up-django-with-postgres-nginx-and-gunicorn

Regards,
KFSys

by Erin Glass
Nginx is one of the most popular web servers in the world and is responsible for hosting some of the largest and highest-traffic sites on the internet. In this guide, we'll discuss how to get Nginx installed on your Ubuntu 20.04 server.
  • Thank you for your response, I will try Ngnix and these tutorials and come back with my result.

    • Hi @opticalfalicy,

      Did you manage to give Nginx a try? How did you like it or are you having troubles setting it up?

      Looking forward to your reply!

      Regards,
      KFSys

      • Hey there,

        Tonight I created an Ubuntu droplet and went through the first article on setting up Nginx.

        Potentially tomorrow, but likely over the weekend I will move onto the second article.

        Thank you for your help and for checking up on me.

      • Hey @KFSys,

        I finally got time this week to work on getting gunicorn / nginx setup. It’s almost there, but I’m working out some errors.

        This can go in another question if need be, but here’s the problem if you know of things I should check:

        Connecting to the site’s IP results in a 500 error. Nginx and the gunicorn.socket both display a status of active.

        Checking the nginx error.log shows:

        2021/03/26 02:32:37 [alert] 3880#3880: *765 768 worker_connections are not enough while connecting to upstream, client: 159.203.37.196, server: 159.203.37.196, request: "GET / HTTP/1.0", upstream: "http://159.203.37.196:80/", host: "159.203.37.196"
        
        
        

        I’ve tried granting privileges to the www-data user/folder. Trying to comb through what I wrote to see if I’ve mistyped, but haven’t found it yet.

        Let me know if you have any thoughts, thank you for your time either way.

        Thanks,
        brett