Question

How to setup Django w/ React frontend on App Platform?

Posted March 17, 2021 304 views
PythonDjangoPython FrameworksDevelopmentDigitalOcean App Platform

As I was following the tutorial on deploying Django to AP, the tutorial was clear on how to deploy Django, but i’m only using Django as my backend. When I deploy React to “/”, that means Django has to live elsewhere (like “/app”), which then breaks things like Django admin (django doesn’t like the new path /app/admin).

Is there a guide somewhere on this process?

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! So Step 5 in the tutorial shows you how to deploy your static files so that the Django admin CSS will still work. Did this step work for you?

  • Unfortunately, the issue is that I am trying to deploy a React static site along with the Django app. The Django app installation works fine, but mixing the two together breaks a lot of things (mainly the paths)

    • So you’ll still have to deploy the static files separately as described in step 5. So your App should have 4 components, 2 static sites (react and Django static files), a service and a database. You’ll probably want to deploy the static files at something like /api-static to avoid collision with your front-end.

      We built a sample application using React and Django and got it working. Here’s our GitHub links

      https://github.com/do-community/rss-reader-frontend
      https://github.com/do-community/rss-reader-api

      And for the static files I deployed them to /api-static and the api at /api. The app lives here https://rss-reader.shark.codes/ if you want to check it out.

      Another option is to have 2 separate apps, one for the front end and one for the React app.

      Hope this helps :)

      • Thank you this is awesome!

        What is the value of “APP_PLAT_ROUTE”? This seems like it might be the solution to some redirect problems I am having…

        • That is set to /api in my config. So whatever route you set your API at you need to set that as APP_PLAT_ROUTE.

          • Wow… this fixed it! Haha. I spent two weeks on Google/YouTube trying to figure out what the redirect problem was, it was the FORCE_SCRIPT_NAME. Thank you!

            The documentation on the repo was super helpful, great resource!