Django/React app API in production vs development?

Question

So I have made a React app that uses Axios to fetch api's. During development, I would have an api call to 127.0.0.1. However, my ReactApp resided on localhost:3000. Therefore, it development, I can't just use:

axios.get('/api/'),

In dev I would need to use:

axios.get('127.0.0.1/api/'),

Anybody have any good ideas on how to resolve this conflict so I can see some data in dev? Kinda tough to design an UI without any data to populate it. Kinda like buying a shirt without trying it on first (which, I never try anything on, so this is a horrible analogy.)

Answer 1

Use it as in the first example. Because it is relative , it will resolve fine for different hosts:

axios.get('/api')

Will automatically resolve to:

// if called by https://example.com/index.js for example
"https://example.com/api"

// if called by localhost/index.js
"https(s)://localhost/api"

In your second example, if you prepend the host and port , you will get duplication!

For example, I just tried your first example on my localhost:3000 and the result is

GET http://localhost:3000/api 404 (Not Found)

Which makes sense because I don't have a /api. But did you notice it appended /api correctly after my host and port?

Now your second example:

GET http://localhost:3000/127.0.0.1/api 404 (Not Found)

It duplicates the host and port. In your case it would be 127.0.0.1:3000/127.0.0.1/api

Just use the first example and it will resolve fine for different hosts (and ports) because it's relative! Did you try it out?