I am trying to decouple my frontend and my backend in my project. My frontend is made up of reactjs and routing will be done with react-router, My backend if made form Django and I plan to use the front end to make API (ajax) calls to Django.
Right now I'm not sure how to get these two ends to talk to each other correctly.
Here is the link to my project
Here is my project structure:
/cherngloong/app (frontend)/cherngloong/templatesindex.jtmlurls.pysettings.py.../contacturls.pyviews.py
I use webpack to build all my JS and CSS and place it into index.html with webpack_loader which looks like this:
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Example</title></head><body><div id="app"></div>{% render_bundle 'main' %}</body>
</html>
In Django here are my cherngloong/urls.py:
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()
I don't want to serve my app from django or make django to serve the same view on ANY url.
Here are my react-router routes:
var routes = (<Router><Route path="/" component={ Views.Layout } ><Route path="contact" component={ Views.Contact }/></Route><Route path="*" component={ Views.RouteNotFound } /></Router>
);export default routes;
I can currently run the server but when I run the front end portion, I see this in the developer tools
http://localhost:8000/static/public/js/main.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)