title: decoupled frontend and backend with Django, webpack, reactjs, react-router
body: <p>I am trying to decouple my frontend and my backend in my project. My frontend is made up of <code>reactjs</code> and routing will be done with <code>react-router</code>, My backend if made form <code>Django</code> and I plan to use the front end to make API (ajax) calls to Django. </p>
  
  <p>Right now I'm not sure how to get these two ends to talk to each other correctly.</p>
  
  <p>Here is the <a href="https://github.com/liondancer/django-cherngloong">link</a> to my project</p>
  
  <p>Here is my project structure:</p>
  
  <pre><code>/cherngloong
    /app (frontend)
    /cherngloong
      /templates
        index.jtml
      urls.py
      settings.py
      ...
    /contact
      urls.py
      views.py
  </code></pre>
  
  <p>I use <code>webpack</code> to build all my JS and CSS and place it into <code>index.html</code> with <code>webpack_loader</code> which looks like this:</p>
  
  <pre><code>{% load render_bundle from webpack_loader %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Example&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      {% render_bundle 'main' %}
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In <code>Django</code> here are my <code>cherngloong/urls.py</code>:</p>
  
  <pre><code>urlpatterns = [
      url(r'^admin/', include(admin.site.urls)),
      url(r'', TemplateView.as_view(template_name='index.html')),
      url(r'^api/', include('contact.urls'))
  ]
  
  urlpatterns += staticfiles_urlpatterns()
  </code></pre>
  
  <p>I don't want to serve my app from django or make django to serve the same view on ANY url.</p>
  
  <p>Here are my <code>react-router</code> routes:</p>
  
  <pre><code>var routes = (
      &lt;Router&gt;
          &lt;Route path="/" component={ Views.Layout } &gt;
              &lt;Route path="contact"  component={ Views.Contact }/&gt;
          &lt;/Route&gt;
          &lt;Route path="*" component={ Views.RouteNotFound } /&gt;
      &lt;/Router&gt;
  );
  
  export default routes;
  </code></pre>
  
  <p>I can currently run the server but when I run the front end portion, I see this in the developer tools</p>
  
  <pre><code>http://localhost:8000/static/public/js/main.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
  </code></pre>