[Discussion] Effectively using react-router with a django project

[goldhand]

Are there any models for effectively using react router in a django project?

There are two routers in a cookiecutter-django/cookiecutter-webpack project currently, the django urls and react-router. Should these both exist together or should one be removed?

The two together currently don't exist well as explained here cookiecutter/cookiecutter-django#637
The redirect in the routes.js could be removed to allow django urls to work but I think the webpack install should be moved to home template and shouldn't exist on the base template. (This allows both routes to work).

[awhillas]

I was using a mix of the two. At the end of the django's url.py i had:

# Catch-All: These urls are handled by the single page BaseApp and react-router
urlpatterns += [
    url(r'^.*/', TemplateView.as_view(template_name="base-react.html"), name='base')
]

404 then have to be handled by React

[goldhand]

Thanks @awhillas, I would recommend this approach too

[awhillas]

Might be handy to have a default Django template with the minimum HTML need to get this working. I confess i'm struggling to figure out what it need to do it see the basic counter example...?

[goldhand]

@awhillas did you try to set up with the 'existing project' flag? Also make sure you set the output dir to ../ and overwrite flag -f see: https://github.com/goldhand/cookiecutter-webpack#using-command-line

[awhillas]

Yeah, i have it working from my project folder but not exactly with my project. I removed the [hash] from the output file name as i had no idea how to include this in my Django templates:

    output: {
      path: path.resolve(PROJECT_ROOT, "myapp/static/scripts"),
      filename: "[name].js",
    },

and in my template i have at the bottom:

        {% if settings.DJANGO_DEV %}{# i.e. we're local #}
            <script src="http://localhost:8080/webpack-dev-server.js"></script>
        {% endif %}
        <script src="{% static "scripts/vendor.js" %}"></script>
        <script src="{% static "scripts/main.js" %}"></script>
    </body>
</html>

which gives weird results when running npm run dev script as the webpack-dev-server is compiling but the page is linking to the wrong files. The app works in standalone if I run it all from http://localhost:8080/ but then its totally separate from the Django templates, which doesn't work with deployment to the production server, i need the compiled files somewhere in static.

Perviously, i had webpack with the -w flag doing the job on dev, and production was just the same without the flag. I can't seem to do that with this setup, i'm not sure how bable-node is working with webpack (its not in ether's documentation) or how to generalise the development so i'm working as close to the final product as possible.

Some examples would be helpful :)

[awhillas]

With some research I found:

In this case you need to teach the webpack-generated assets to make requests to the webpack-dev-server even when running on a HTML-page sent by the backend server. On the other side you need to teach your backend server to generate HTML pages that include script tags that point to assets on the webpack-dev-server. In addition to that you need a connection between the webpack-dev-server and the webpack-dev-server runtime to trigger reloads on recompilation.

from: https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

So i guess my base-react.html template needs to have something like this to get hot reloading while in local dev:

        {% if settings.DJANGO_DEV %}
            <script src="http://localhost:8080/webpack-dev-server.js"></script>
            <script src="http://localhost:8080/build/vendor.js"></script>
            <script src="http://localhost:8080/build/main.js"></script>
        {% endif %}

if i have this in my webpack config:

    context: PROJECT_ROOT,
    output: {
      path: path.resolve(PROJECT_ROOT, "scout/static/scripts"),
      filename: "[name].js",
      publicPath: "/build/",
    },

All good now!

[goldhand]

I should add some docs for this but the best way to do this IMHO is to use the generated webpack stats json file. There is a django plugin that works very well with this: https://github.com/owais/django-webpack-loader

[goldhand]

@awhillas if you generate a cookiecutter-webpack project and you use the existing_project flag as true, the appropriate webpack config should be generated, meaning that the webpack-stats.json file will be generated on build. You just have to add the django configuration. This guide will help you with that: http://owaislone.org/blog/webpack-plus-reactjs-and-django/

[awhillas]

Just googled this independently and found django-webpack-loader myself and was on my way back here to note it :D
Will have a look and thanks again!

[CrazyChief]

@awhillas you save my life!)))

[HoangJerry]

I am using react and django but I get this issue.

[spedy]

@HoangJerry you're probably sending invalid data to highcharts. Recheck your data structure and data type.

[jmitchell33]

@awhillas I'm curious how you handle state and preserving the app state when refreshing the page when the user has navigated to a subcomponent / nested route.