score:0
for dev:
you can run both of them on two different shells. by default, your django rest api will be at 127.0.0.1:8000 and react will at 127.0.0.1:8081. i do not think there will be any issues for the two to communicate via the fetch api. just make sure you have allowed_hosts=['127.0.0.1']
in your django's settings file.
for production:
it will work like any other mobile app or web app does! host your your restful api on an application server (aws, heroku or whatever you choose) and create and host your react app separately. use javascript's fetch api to send requests to your django endpoints and use the json/xml response to render your views in react.
score:1
you should add cors support to django if you developing on separate servers.
here the package for drf it contains instructions how to setup cors properly.
here is what you can do on the production server
in the main urls:
# all your project urls
urlpatterns = [
...
url(r'^', templateview.as_view(template_name='index.html'), name='index')
]
templateview
at the end of urlpatterns will match for all requests which not matched by previous url patters. this view should serve a template with a wepback bundle.
then you do collectstatic and point nginx static to static root as usual.
you could do the same on the develop environment if you want.
and don't forget to change root url for your backend api in react app:
let root = '/api/'
if (process.env.node_env !== 'production') {
root = 'http://127.0.0.1:8000/api/'
}
...
Source: stackoverflow.com
Related Query
- How to configure Django Rest Framework + React
- How to Deploy Django Rest Framework and React on AWS
- How to use Django User Groups and Permissions on a React Frontend with Django Rest Framework
- How to send CSRF Cookie from React to Django Rest Framework with Axios
- How to upload image to aws s3 using react and django rest framework
- Django Rest Framework and React Front End: How to prevent unauthorized users from viewing private images if they get a hold of the image URL?
- How to implement autocomplete user search in React and Django Rest Framework
- How to send FormData attribute with an array of strings from React Client to Django + Django Rest Framework API
- How to upload file to Django rest framework API using Axios and react hook form?
- How to insert data in child table from react to django rest framework models
- How to show my reset password page in React using Django Rest Framework and Dj-rest-auth
- How to access a Django rest Framework API from React
- Django Rest Framework + React - token vs session authentication
- React Django REST framework session is not persisting/working
- cannot upload files to django rest framework using react js
- how to display large list of data using reactJS as frontend and django rest framework as backend
- How do I authenticate users with Django REST framework and React.js frontend?
- Sending data from React form to Django Rest Framework without a Model
- How to make a POST request using DJANGO REST framework with ajax
- Django Rest Framework with React order not working
- How to send files to Django REST Framework from React?
- How do I load image to React from Django REST API?
- how to set up ckfinder for ckeditor with ( React.js / django /django rest framework )?
- Django Rest Framework + React JWT authentication, 403 Forbidden on protected views
- How to implement pagination in a Django and React app without using the REST framework?
- How to play an uploaded video in django rest framework
- How Do I Configure REST Urls When Running React With Azure API-Management?
- How to retrieve external JSON file in Django Rest Framework for use with React?
- How do you catch Django rest non_field_errors in React JS?
- Authentication with React and Django REST Framework
More Query from same tag
- useForm in react is not working properly for two manual update
- ImmutableJS Map, how to iterate over a map and return a modified result
- Find and manipulate a React.js component from the JavaScript console
- React Router Link doesn't refresh content, but I'm using withRouter
- Unable to display promise data inside a method in render
- cypress - start server and test - run both http mock server and socket server on React application
- How to access dom element that is not inside JSX in React?
- Keep getting TypeError: Cannot read property 'map' of undefined when I click on checkbox, dont know where the problem is
- Removing a object from array state ReactJS
- Material UI Checkbox not toggling on and off
- Axios - Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
- Type 'ReactType' is not generic (material-ui@next)
- react countdown timer isn't decrementing well, it is inconsistently changing numbers
- Issues with Background Larger than Circle Div CSS
- having a function run every ten seconds or when an input changes
- Does React renders Component due to props?
- How to display a fixed code snippet on the website using react
- axios GET request function export/ import in react
- Create a custom onChange function as a parameter for a component in react, which takes 2 custom arguments
- Mapping through Strapi data doesnt work in React
- Data not passing to req.body variables from HTML form
- Cookie not send when developing React app using axios or fetch, althoug setting withCredentials: true, respectively credentials: 'include'
- Warning: unstable_flushDiscreteUpdates when rendering component in React
- All consumers of a Provider will re-render when value prop changes?
- How to run PancakeSwap V2 with testnet?
- State values set from API call sometimes won't display on the page (or on form components)
- Change state dynamically based on the external Internet connectivity - React (offline/online)
- Rendering React variables inside JSX, specifically how to 'tokenize' React Router structures? Is it possible?
- React-redux error "The prop `store` is marked as required in `Root`, but its value is `undefined"
- Managing State when Passing React Component Constuctor Function to Another Component as Attribute