CODEWITHSUNDEEP
reactjsherokudjango-rest-frameworkdeployment
Dimitri Edel
Dimitri Edel

Reputation: 1

How to deploy React + Django Rest Framwork API on the same host in heroku?

My project works fine in development mode. But I cannot get it deployed properly on heroku.The problem is I can't find a way to forward requests from (frontend) React to the (backend) API.

Here are the contents of my Procfile

web: node index.js
web-backend: gunicorn server.backend.rest_api.rest_api.wsgi:application --bind 0.0.0.0:$PORT --log-file -

In development mode I use React's setupProxy.js like so:

export default function (app) {
    console.log('Setting up proxy..................');
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8000', // Your Django backend URL during development
            changeOrigin: true,
        })
    );
};

It's a piece of cake because I know what port my backend is listening.

But on heroku, I don't know how to get the port number on which the django rest api is listening. Upon deploying the project I can see it in the console, but the port number gets assigned during the deployment process, so it is never the same one.

There must be a way to set this up. If anyone knows how to make it happen. I would really appreciate if you let me know.

Thanks in advance!

I have been asking several AIs like copilot or Google's Gemini. But nothing they suggests helps or makes sense a lot of the time.

Upvotes: -3

Views: 25

Answers (0)

Related Questions