Django back end with a React front end

Question

The idea

I've started off building this social media kind of website, which includes the basic social media pages such as a profile, a status feed, searching, events, and so on. Each page is a seperate django template and data is visualized by using variables in the django template engine. But at this point, I want to change these static pages to something more dynamic, using ReactJS.

But how?

I would like to make the pages dynamic, but it should still be a multi page website with urls like /user/<id>. I came up with the following option:

A template for each page. Each page having one bundle. Let Django handle the routes.

• Create a seperate Django template for each page, just like a normal Django application would do.
• Use django-webpack-loader to load bundles.
• Each page has a seperate bundle. Bundles are created by adding multiple entries in webpack.config.js. This can result in a fairly large amount of entry points when we have 40+ different pages.
• URLs are handled by Django and are accessible by React via a public javascript variable in the template. Example. And other initial data for the page (such as username, avatar, profile information) are also loaded in this variable via the Django template engine.
• Dynamic features such as form validations without reloading the page are handled by React and a Django Rest API using django-rest-framework.

So?

• Is this the correct way to deal with this?
• I am having some trouble figuring out how to get a django template variable such as request.user to a javascript variable accessible by React.
• If so, how should I structure such application?
• Is it alright to have a bundle for each separate page? All pages have the same header for example. Including this header in each bundle seems overkill.

Answer 1

Your plan should work, but I think you should consider how much of your application you want to be dynamic.

If you only need a few pages to have the dynamic functionality that comes from React, it's probably a good idea to just plop in some self-contained React components and bundle them separately as you have planned. However, if most of your project will need to be dynamic, I think it would be best to forget about Django templates for most of the pages, and just create a solid API backend for React to use.

Here is a quick example of how you can configure webpack to bundle up your react components:

This is an excerpt from a large Django project where we are using a couple React components. bundle has a bunch of other javascript stuff, and report is a self-contained React component:

webpack.config.js

    ...
    entry: {
        bundle: './server/apps/core/static/core/app.js',
        report: './server/apps/reports/static/reports/js/app.jsx'
    },
    output: {
      path: path.resolve('./server/apps/core/static/core/bundles'),
      path: path.resolve('./server/apps/core/static/core/bundles'),
      filename: 'bundle.js' + filename: '[name].js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    ...

And then in the template that you want to stick the component it:

{% block content %}
    <div id="root"></div>
{% endblock content %}
{% block extrascripts %}
    <script type="text/javascript">
        var dataUrl = "{% url 'reports:data-chart' %}";
    </script>
    <script src="{% static 'core/bundles/report.js' %}"></script>
{% endblock extrascripts %}

I have another example here that might be helpful to play around with. I need to update it, but it is more of a boilerplate for using React with Django REST Framework, and foregoing the Django template system.

Hope this helps.