CODEWITHSUNDEEP
javascriptdjangoreactjsecmascript-6webpack
w--
w--

Reputation: 6667

react: how to pass in URLs for REST APIs

Starting to learn react and couldn't find the answer to this on the internet. Maybe I don't know what terms to use.

My backend is django and I want to be able to pass in URLs for REST APIs to my React front end.
I don't want to hard code them in react as they are already defined in django.
It makes sense to me that I would want to render a script tag on my html template that contains an object containing the URL values.

e.g. the django template would have something like

<script type="text/javascript">
  var CONFIG = {
    some_url : '{% url "my-api" %}'
  }
</script>

(for those not familiar with django, that {% url %} tag renders a url like /path/to/myapi)

Then in my React Stores/Actions I would just refer to CONFIG.some_url.

Is this the right way to do it? Or is there a better way to make this information available to my react components.

------------ Edit -----------------

Using webpack to transpile the jsx files and using django-webpack-loader to integrate everything. this means that the django templates are completely rendered before the jsx is loaded on top.
As a result the template tags cannnot run inside the jsx files.

Upvotes: 2

Views: 5037

Answers (3)

matthieu.cham
matthieu.cham

Reputation: 511

Even though you're using django-webpack-loader(I am too), you still can pass props to your React app. You can proceed like this:

1) Resolve the absolute backend url in your view.py: 

def get_context_data(self, **kwargs):
    context['APIROOT_URL'] = reverse('api-root', request=self.request)
    return context

2) Pass the context prop to the html template

    <div id="react-app"></div>

<script>
    window.__APIROOT_URL__= '{{ APIROOT_URL }}';
    window.react_mount = document.getElementById('react-app');
</script>
{% render_bundle 'main' %}

3) Finally inside your app, get the property like this:

const apirootUrl = window.__APIROOT_URL__

Upvotes: 3

Harkirat Saluja
Harkirat Saluja

Reputation: 8114

Put following plugin in your webpack configuration:-

  plugins: [
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environ),
    }
  })
  ],

Run the webpack command as follows:-

environ=local webpack

or 

 environ=production webpack -p //for production

Create a constants file where you keep a function which returns API urls based on environment variable set above.(local,dev,production).

const api_url=function(){
  let api_url=//production api url
  if(process.env.NODE_ENV == 'local'){
    //local api url
  }
  else if(process.env.NODE_ENV == 'development'){
    //dev api url
  }
  return api_url;
}

export const url= api_url();

Import this in your componentDidMount() call the api using ajax/fetch/axios

import {url} from ../constants 

componentDidMount(){
   //api call
}

If you are using django and react together I would strongly suggest to look at django-webpack-loader once

Upvotes: 0

JFAP
JFAP

Reputation: 3727

pass it as props:

<MyComponent src={% url %} />

Upvotes: 0

Related Questions