How to get Django and ReactJS to work together

Question

New to Django and even newer to ReactJS  I have been looking into AngularJS and ReactJS  but decided on ReactJS  It seemed like it was edging out AngularJS as far as popularity despite AngularJS having more of a market share  and ReactJS is said to be quicker to pickup    All that junk aside  I started taking a course on Udemy and after a few videos it seemed important to see how well it integrates with Django  That is when I inevitably hit a wall just getting it up and running  what kind of documentation is out there so that I am not spinning my wheels for several hours and nights    There really isn t any comprehensive tutorials  or pip packages  I came across  The few I came across didn t work or were dated  pyreact for example    One thought I had was just to treat ReactJS completely separate  but keeping into consideration the classes and IDs I want the ReactJS components to render in  After the separate ReactJS components are compiled into a single ES5 file  just import that single file into the Django template    I think that will quickly breakdown when I get to rendering from Django models although the Django Rest Framework sounds like it is involved  Not even far enough to see how Redux affects all of this   Anyway  anyone have a clear way they are using Django and ReactJS they care to share   At any rate  the documentation and tutorials are plentiful for AngularJS and Django  so it is tempting to just go that route to get started with any front-end framework    Not the best reason

User · Accepted Answer

I don t have experience with Django but the concepts from front-end to back-end and front-end framework to framework are the same    React will consume your Django REST API  Front-ends and back-ends aren t connected in any way  React will make HTTP requests to your REST API in order to fetch and set data  React  with the help of Webpack  module bundler   amp  Babel  transpiler   will bundle and transpile your Javascript into single or multiple files that will be placed in the entry HTML page  Learn Webpack  Babel  Javascript and React and Redux  a state container   I believe you won t use Django templating but instead allow React to render the front-end  As this page is rendered  React will consume the API to fetch data so React can render it  Your understanding of HTTP requests  Javascript  ES6   Promises  Middleware and React is essential here    Here are a few things I ve found on the web that should help  based on a quick Google search     Django and React API Youtube tutorial Setting up Django with React  replaced broken link with archive org link  Search for other resources using the bolded terms above  Try  Django React Webpack  first     Hope this steers you in the right direction  Good luck  Hopefully others who specialize in Django can add to my response

User · Answer

The first approach is building separate Django and React apps  Django will be responsible for serving the API built using Django REST framework and React will consume these APIs using the Axios client or the browser s fetch API  You ll need to have two servers  both in development and production  one for Django REST API  and the other for React  to serve static files    The second approach is different the frontend and backend apps will be coupled  Basically you ll use Django to both serve the React frontend and to expose the REST API  So you ll need to integrate React and Webpack with Django  these are the steps that you can follow to do that  First generate your Django project then inside this project directory generate your React application using the React CLI  For Django project install  django-webpack-loader with pip   pip install django-webpack-loader   Next add the app to installed apps and configure it in settings py by adding the following object  WEBPACK LOADER          DEFAULT                  BUNDLE DIR NAME                    STATS FILE   os path join BASE DIR   webpack-stats json                  Then add a Django template that will be used to mount the React application and will be served by Django      load render bundle from webpack loader       lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  UTF-8    gt       lt meta name  viewport  content  width device-width    gt       lt title gt Django   React  lt  title gt     lt  head gt     lt body gt       lt div id  root  gt       This is where React will be mounted      lt  div gt          render bundle  main         lt  body gt   lt  html gt    Then add an URL in urls py to serve this template   from django conf urls import url from django contrib import admin from django views generic import TemplateView  urlpatterns          url r     TemplateView as view template name  main html          If you start both the Django and React servers at this point you ll get a Django error saying the webpack-stats json doesn t exist  So next you need to make your React application able to generate the stats file   Go ahead and navigate inside your React app then install webpack-bundle-tracker  npm install webpack-bundle-tracker --save   Then eject your Webpack configuration and go to config webpack config dev js then add   var BundleTracker    require  webpack-bundle-tracker           module exports          plugins              new BundleTracker  path         filename   webpack-stats json               This add BundleTracker plugin to Webpack and instruct it to generate webpack-stats json in the parent folder   Make sure also to do the same in config webpack config prod js for production   Now if you re-run your React server the webpack-stats json will be generated and Django will be able to consume it to find information about the Webpack bundles generated by React dev server   There are some other things to  You can find more information from this tutorial

User · Answer

The accepted answer lead me to believe that decoupling Django backend and React Frontend is the right way to go no matter what  In fact there are approaches in which React and Django are coupled  which may be better suited in particular situations  This tutorial well explains this  In particular   I see the following patterns  which are common to almost every web framework   -React in its own    frontend    Django app  load a single HTML template and let React manage the frontend  difficulty  medium  -Django REST as a standalone API   React as a standalone SPA  difficulty  hard  it involves JWT for authentication  -Mix and match  mini React apps inside Django templates  difficulty  simple

User · Answer

You can try the following tutorial  it may help you to move forward   Serving React and Django together

User · Answer

I know this is a couple of years late  but I m putting it out there for the next person on this journey    GraphQL has been helpful and way easier compared to DjangoRESTFramework  It is also more flexible in terms of the responses you get  You get what you ask for and don t have to filter through the response to get what you want   You can use Graphene Django on the server side and React Apollo Relay    You can look into it as that is not your question

User · Answer

As others answered you  if you are creating a new project  you can separate frontend and backend and use any django rest plugin to create rest api for your frontend application  This is in the ideal world   If you have a project with the django templating already in place  then you must load your react dom render in the page you want to load the application  In my case I had already django-pipeline and I just added the browserify extension   https   github com j0hnsmith django-pipeline-browserify   As in the example  I loaded the app using django-pipeline   PIPELINE                    javascript             browserify                  source filenames                       js entry-point browserify js                               output filename    js entry-point js                        Your  entry-point browserify js  can be an ES6 file that loads your react app in the template   import React from  react   import ReactDOM from  react-dom   import App from    components app js   import  babel-polyfill    import   Provider   from  react-redux   import   createStore  applyMiddleware   from  redux   import promise from  redux-promise   import reducers from    reducers index js    const createStoreWithMiddleware   applyMiddleware    promise   createStore    ReactDOM render     lt Provider store  createStoreWithMiddleware reducers   gt       lt App  gt     lt  Provider gt      document getElementById  my-react-app        In your django template  you can now load your app easily      load pipeline        comment      browserify  is a PIPELINE key setup in the settings for django   pipeline  See the example above    endcomment        javascript  browserify         comment     the app will be loaded here thanks to the entry point you created  in PIPELINE settings  The key is the  entry-point browserify js   responsable to inject with ReactDOM render   you react app in the div  below    endcomment     lt div id  my-react-app  gt  lt  div gt    The advantage of using django-pipeline is that statics get processed during the collectstatic

User · Answer

A note for anyone who is coming from a backend or Django based role and trying to work with ReactJS  No one manages to setup ReactJS enviroment successfully in the first try     There is a blog from Owais Lone which is available from http   owaislone org blog webpack-plus-reactjs-and-django    however syntax on Webpack configuration is way out of date   I suggest you follow the steps mentioned in the blog and replace the webpack configuration file with the content below  However if you re new to both Django and React  chew one at a time because of the learning curve you will probably get frustrated   var path   require  path    var webpack   require  webpack    var BundleTracker   require  webpack-bundle-tracker     module exports         context    dirname      entry     static assets js index       output            path  path resolve    static assets bundles             filename    name - hash  js             plugins            new BundleTracker  filename     webpack-stats json             module        loaders                    test     jsx             loader   babel-loader           exclude   node modules           query              presets    es2015    react                                    resolve            modules    node modules    bower components            extensions     js     jsx

User · Answer

I feel your pain as I  too  am starting out to get Django and React js working together  Did a couple of Django projects  and I think  React js is a great match for Django  However  it can be intimidating to get started  We are standing on the shoulders of giants here     Here s how I think  it all works together  big picture  please someone correct me if I m wrong     Django and its database  I prefer Postgres  on one side  backend  Django Rest-framework providing the interface to the outside world  i e  Mobile Apps and React and such  Reactjs  Nodejs  Webpack  Redux  or maybe MobX   on the other side  frontend    Communication between Django and  the frontend  is done via the Rest framework  Make sure you get your authorization and permissions for the Rest framework in place   I found a good boiler template for exactly this scenario and it works out of the box  Just follow the readme https   github com scottwoodall django-react-template and once you are done  you have a pretty nice Django Reactjs project running  By no means this is meant for production  but rather as a way for you to dig in and see how things are connected and working   One tiny change I d like to suggest is this  Follow the setup instructions BUT before you get to the 2nd step to setup the backend  Django here https   github com scottwoodall django-react-template blob master backend README md   change the requirements file for the setup   You ll find the file in your project at      backend requirements common pip Replace its content with this  appdirs  1 4 0 Django  1 10 5 django-autofixture  0 12 0 django-extensions  1 6 1 django-filter  1 0 1 djangorestframework  3 5 3 psycopg2  2 6 1   this gets you the latest stable version for Django and its Rest framework   I hope that helps

User · Answer

Hoping to provide a more nuanced answer than any of the ones here  especially as some things have changed since this was originally asked  4 years ago  and because many of the top-voted answers claiming that you have to set this up as two separate applications are not accurate  You have two primary architecture options   A completely decoupled client server approach using something like create-react-app and Django REST Framework A hybrid architecture where you set up a React build pipeline  likely using webpack  and then include the compiled files as static files in your Django templates   These might look something like this  Option 1  Client Server Architecture    Option 2  Hybrid Architecture    The decision between these two will depend on your   your team s experience  as well as the complexity of your UI  The first option is good if you have a lot of JS experience  want to keep your front-end   back-end developers separate  or want to write your entire application as a React single-page-app  The second option is generally better if you are more familiar with Django and want to move quickly while also using React for some parts of your app  I find it s a particularly good fit for full-stack solo-developers  There is a lot more information in the series  quot Modern JavaScript for Django Developers quot   including choosing your architecture  integrating your JS build into a Django project and building a single-page React app  Full disclosure  I m the author of that series

[django] How to get Django and ReactJS to work together?

Examples related to django

Examples related to reactjs