title: How to connect existing Django app with existing react app using webpack
body: <p>So I have a Django project that acts as a backend REST server, and I would like to integrate that with an existing React project that makes AJAX calls to this REST server. Again, both of these projects already exist, I just want to connect them. Let's say the root of my Django project is DJANGOROOT and that is where manage.py is located. My Django project has a couple of Django apps that are part of the project. Let's say my Django project is called "mydjangoproj", the two Django apps are called "myapp1" and "myapp2" and the React project is called "myreactproj". Each of these two projects (the Django project with the two apps, and the React project) is stored in a separate GIT repo and to connect them on my server I have the following directory structure:</p>
  
  <pre><code>DJANGOROOT/
  DJANGOROOT/mydjangoproj
  DJANGOROOT/mydjangoproj/settings.py
  DJANGOROOT/mydjangoproj/urls.py
  DJANGOROOT/mydjangoproj/static/
  DJANGOROOT/mydjangoproj/templates/
  DJANGOROOT/myapp1
  DJANGOROOT/myapp2
  DJANGOROOT/myreactproj
  DJANGOROOT/myreactproj/package.json
  DJANGOROOT/myreactproj/src
  DJANGOROOT/myreactproj/src/index.js
  etc
  </code></pre>
  
  <p>Note that the React app root folder is inside DJANGOROOT and is parallel to my django project and app folders.</p>
  
  <p>The React app uses an npm module called react-scripts (see <a href="https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build" rel="nofollow noreferrer">https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build</a>) that has a build script that will build all the stuff in DJANGOROOT/myreactproj/src (staring with index.js) and will put all this in a folder called DJANGOROOT/myreactproj/build. When I run the build (using "npm run build") it fills up the folder DJANGOROOT/myreactproj/build like this:</p>
  
  <pre><code>DJANGOROOT/myreactproj/build
  DJANGOROOT/myreactproj/build/index.html
  DJANGOROOT/myreactproj/build/{several other files}
  DJANGOROOT/myreactproj/build/static
  DJANGOROOT/myreactproj/build/static/css
  DJANGOROOT/myreactproj/build/static/js
  DJANGOROOT/myreactproj/build/static/media
  </code></pre>
  
  <p>So it appears that to connect Django to my React app, I have to find a way to have the root path for Django (mydomain.com/) point to DJANGOROOT/myreactproj/build/index.html. I understand that I must create a "home" template that is launched by the Django view that runs at mydomain.com/, and that home template has to launch the React app something like this:</p>
  
  <pre><code>{% load render_bundle from webpack_loader %}
  {% render_bundle 'main' 'js' 'DEFAULT' %}
  </code></pre>
  
  <p>But I'm not sure how exactly I need to tell Django where to look for main.js (or is it index.js) and I'm not sure how to get Django to see all the static stuff in DJANGOROOT/myreactproj/build/static.</p>
  
  <p>I also ran "npm list webpack" inside DJANGOROOT/myreactproj to get the version of webpack, and it shows this:</p>
  
  <pre><code>└─┬ react-scripts@1.0.11
    └── webpack@3.5.1 
  </code></pre>
  
  <p>I assume this means that webpack 3.5.1 is being used and is somehow bundles with react-scripts v 1.0.11</p>
  
  <p>Also note that the Django app is already running under HTTPS under NGINX and UWSGI, so this is a real server not a dev server.</p>
  
  <p>Can someone who has been through this process shed some light on what I need to do to hook this all up properly?</p>