I created front end in Reactjs and backend in Django and linked using Django rest API. but react runs in localhost:3000 and Django in localhost:8000. How to combine or integrate these two and runs in the same address.
1
-
I made a boilerplate with hosting and fileupload. You can find it here: hvitis.dev/how-to-connect-filepond-reactjs-and-drf-extensionHvitis– Hvitis2020-10-19 22:31:00 +00:00Commented Oct 19, 2020 at 22:31
Add a comment
|
2 Answers
Development
If you are in the development phase and using Create React App then you can add "proxy": "http://localhost:8000" to your package.json. Then your api requests done in React will be forwarded to port 8000.
Production
The production setup is quite different. You'll want to run yarn build and let either Django itself or nginx serve the index.html. In that case there won't be multiple ports anymore since the React build is just static files.
I am creating an example real world project as we speak with the same stack (GitHub). It doesn't have production setup quite ready yet, but you can see my development setup if you want some inspiration.
1 Comment
Abhiram P Jayan
Will this integrate react and Django??
You need to link them using the routes you created in your backend. Put the routes in fetch requests in React frontend and call them via GET or POST methods etc. Your users will only hit the frontend host address once you deploy your application to the server.
2 Comments
Abhiram P Jayan
How to do that?
Anurag
Let`s say you have a route in the backend like this : localhost:5000/photos then in the frontend with react you need to use fetch('localhost:5000/photos/') to get back the response from the backend. You can then use the response object received to render the data with a react component.