Add an example project+app

[markfinger]

Components, templates, views, etc.

[markfinger]

Folks seem to be having issues with the bundles being placed in the STATIC_ROOT. Would be good to work out exactly what's required to get it all working with the devserver.

[felix-d]

Yeah! It took me a while to understand how to make things work, and I still get a bug, but I guess this is due to my poor knowledge of django and react (just started both). In prod, i guess running the dedicated server for component rendering on a shared hosting wouldnt work am i right? I'm having a hard time understanding how the servers work together, is the nodejs server listening on a different port? Is it Django that proxies the requests to the nodejs server? Well I guess I'll wait for the example project and in the meantime use react client side only with a beautiful spinner till my components get rendered :P Thanks for your awesome work! I'll keep an eye on the project for sure!

[matthewryanscott]

@felix-d It depends on the host. Some hosts allow them, some don't.

django-react uses django-node and django-webpack (both created by @markfinger) to compile your JSX and bundle it up into a single JS file that is then referenced in your Django template. You are correct in that a separate nodejs process runs on localhost. It exposes a simple API that the Django server makes a request to. The request is in the form of 1) path to component we are rendering, 2) path to serialized props for the component, and 3) what kind of render it is (static or string).

[matthewryanscott]

@markfinger I found a solution that works for me for serving up static files:

from os.path import join, normpath

# ...

BUNDLES_PATH = normpath(join(PACKAGE_ROOT, 'bundles'))

DJANGO_WEBPACK = {
    'STATIC_ROOT': BUNDLES_PATH,
}

STATICFILES_DIRS += (BUNDLES_PATH,)

(Django complains if you add the STATIC_ROOT path to STATICFILES_DIRS.)

It was a little misleading for me to see STATIC_ROOT here: https://github.com/markfinger/django-react/blob/master/django_react/settings.py#L16 but it doesn't seem to be referenced in django-reacts main logic. Is that needed, or should we instead refer people in the README to set it in django-webpack as above?

[markfinger]

Yeah, there's a couple of outstanding issues with the server, one of which would be support for shared hosts which (probably) don't want you opening processes on arbitrary ports.

I've been moving the server code into django-node, on the node-server branch. Originally the motivation was the performance improvements of a persistent process, but it also enables you to spin up a node instance manually, use Node's debugger, see stdout, etc. Django-react's render server is pretty opaque, so it'll be handy to have visibility on the server's state & output in either another terminal or as a background process.

The grand plan is to make a platform which enables a bunch of cool tools for development: CSS/JS compression, live CSS changes, Webpack's incremental compilation and hot module loading, etc.

I've been building it with development environments in mind, but you can either define its settings - address/port/etc - or subclass the server and configure django-node to use your subclass.

Once it's landed on master (probably later today), I'll start updating django-react to use it.

[markfinger]

@gldnspud not sure about the static root issues. Hmm, if I get some time, I'll take a stab at the example later today.

[felix-d]

Ok now I get how everything works together. Thanks a lot! I will surely try to migrate to server side rendering when i finish with front end dev. Anyway, for prod and hosting, i might go with Webfaction, amd they allow listening on multiple ports. Thanks for clearing up my mind on the project!

[matthewryanscott]

@felix-d I've been using Webfaction (shameless affiliate link) for about 10 years now and indeed they are very flexible. You can even set up separate user accounts to isolate services for example.

I haven't deployed django-react there just yet but plan to once it's smoothed out. I'm sure it'll work great as I already have redis installed.

Just have to watch your memory usage, but they allow more memory for their entry level plans than they used to, and bump it up every year or two as they upgrade.

[felix-d]

Glad to hear it!! thanks @gldnspud

[matthewryanscott]

Updated the skeleton example app to work fully, and describe some of its behavior.

See https://github.com/markfinger/django-react/pull/17

[markfinger]

In regards to the issues with getting webpack's bundles to work, I've added a static file finder to django-webpack which fixes the issue.

STATICFILES_FINDERS = (
    # ...
    'django_webpack.staticfiles.WebpackFinder',
)

See the example's settings: https://github.com/markfinger/django-react/blob/master/example/djangosite/settings.py