Add docs and update templates for Django-React integration #84

jeancochrane · 2020-06-18T17:06:48Z

Overview

This PR adds documentation and updates the new-django-app template to recommend a pattern for using React components in a Django app.

Connects #66.

Testing Instructions

View the rendered markdown, confirm it looks good and links resolve properly
Change to the docker/templates directory and create a new app with docker-compose run --rm cookiecutter -f new-django-app
Accept all default Cookiecutter options
Change to the my-new-app repo and build container images with docker-compose build
Follow the instructions in the Usage section of the new docs and use the example code to test the hybrid integration
Visit http://localhost:8000 and confirm you see the text Welcome, foobar! below
Once you're done testing, remember to clean up the testing app:
- docker-compose down --volumes
- cd ../ && rm -Rf my-new-app
- docker rmi my-new-app

hancush

This is great, @jeancochrane! Excited to bring this in. Left a few things for your attention inline.

hancush · 2020-06-24T20:37:08Z

django/django-react-integration.md

+
+### Install Node packages
+
+Using `yarn add` or `npm install`, Update your `package.json` file to include


Any reason not to standardized on yarn?

Not that I can think of. I removed the note about npm install.

django/django-react-integration.md

hancush · 2020-06-24T20:50:12Z

django/django-react-integration.md

+COMPRESS_OUTPUT_DIR = 'compressor'
+```
+
+### Set up caching


I'm going to be doing some optimization work along these lines for BGA next month. Happy to expand on this section then.

hancush · 2020-06-24T20:51:09Z

.../templates/new-django-app/{{cookiecutter.app_name}}/{{cookiecutter.module_name}}/settings.py

@@ -155,16 +154,11 @@

 # Django Compressor configs
 COMPRESS_PRECOMPILERS = (
-    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
+    ('module', 'npx browserify {infile} -t [ babelify --presets [ @babel/preset-env ] ] > {outfile}'),


Thanks 😄

hancush · 2020-06-24T20:58:03Z

django/django-react-integration.md

+
+There are many ways of integrating Django and React. At DataMade, our preferred
+method is a so-called "hybrid" approach, where Django builds React components into its templates
+by using a context variable for props and bundling components with Babel, Browserify, and


It would be helpful to very succinctly describe what each part of this stack does, e.g., Django feeds the data to a React component in the template, Babel translates modern JavaScript for backwards compatibility, etc.

I like this idea a lot. Done!

hancush · 2020-06-24T20:59:49Z

django/README.md

@@ -11,6 +11,7 @@ In some cases, it also provides extended documentation for setup and use.
 | CMS | [`wagtail`](https://wagtail.io/developers/) | [Link](wagtail/README.md) |
 | Search | [`django-haystack`](https://github.com/django-haystack/django-haystack) | |
 | Autocomplete | [`django-autocomplete-light`](https://github.com/yourlabs/django-autocomplete-light) | |
-| Cross-browser ES6 support | [`django-compressor`](https://github.com/django-compressor/django-compressor) + [`django-compressor-toolkit`](https://github.com/kottenator/django-compressor-toolkit) | [Link](django-compressor.md) |
+| Cross-browser ES6 support | [`django-compressor`](https://github.com/django-compressor/django-compressor) | [Link](django-compressor.md) |


I wonder if we should point to the Django React documentation instead of linking to this file, or break out the setup portion of Django React into this compressor docs file. Thoughts?

I think I favor breaking installation out into the django-compressor.md docs.

Excellent point! I moved the installation instructions over to django-compressor.md

django/django-react-integration.md

hancush · 2020-06-24T21:05:34Z

django/django-react-integration.md

+#### Bundle and load your component with `django-compressor`
+
+Finally, use the `compress` templatetag provided by `django-compressor` and the
+`view.component` attribute to bundle and load your component as an external script.


Where does view.component come from?

It's set on the view for this template in the section Define a view with a path to your component above:

Define a Django view that includes a component attribute with a staticfile
path to the component you've defined, as well as the typical template_name
attribute representing the path to a Django template. The combination of these
two attributes will allow us to render the component in the view's template.

class Home(TemplateView): title = 'Home' template_name = 'my_new_app/index.html' component = 'js/pages/index.js' # Staticfile path to your component code

I'll adjust the wording here to make it a little bit clearer where view.component is coming from.

- Fix "template tag" typo - Change app name in django-react template Co-authored-by: hannah cushman garland <[email protected]>

…t integration overview

jeancochrane

Thanks for the excellent comments @hancush! Back to you.

jeancochrane · 2020-06-25T16:06:08Z

django/README.md

@@ -11,6 +11,7 @@ In some cases, it also provides extended documentation for setup and use.
 | CMS | [`wagtail`](https://wagtail.io/developers/) | [Link](wagtail/README.md) |
 | Search | [`django-haystack`](https://github.com/django-haystack/django-haystack) | |
 | Autocomplete | [`django-autocomplete-light`](https://github.com/yourlabs/django-autocomplete-light) | |
-| Cross-browser ES6 support | [`django-compressor`](https://github.com/django-compressor/django-compressor) + [`django-compressor-toolkit`](https://github.com/kottenator/django-compressor-toolkit) | [Link](django-compressor.md) |
+| Cross-browser ES6 support | [`django-compressor`](https://github.com/django-compressor/django-compressor) | [Link](django-compressor.md) |


Excellent point! I moved the installation instructions over to django-compressor.md

jeancochrane · 2020-06-25T16:06:36Z

django/django-react-integration.md

+
+### Install Node packages
+
+Using `yarn add` or `npm install`, Update your `package.json` file to include


Not that I can think of. I removed the note about npm install.

jeancochrane · 2020-06-25T16:26:53Z

django/django-react-integration.md

+
+There are many ways of integrating Django and React. At DataMade, our preferred
+method is a so-called "hybrid" approach, where Django builds React components into its templates
+by using a context variable for props and bundling components with Babel, Browserify, and


I like this idea a lot. Done!

jeancochrane · 2020-06-25T16:27:24Z

django/django-react-integration.md

+COMPRESS_OUTPUT_DIR = 'compressor'
+```
+
+### Set up caching


jeancochrane · 2020-06-25T16:30:53Z

django/django-react-integration.md

+#### Bundle and load your component with `django-compressor`
+
+Finally, use the `compress` templatetag provided by `django-compressor` and the
+`view.component` attribute to bundle and load your component as an external script.


It's set on the view for this template in the section Define a view with a path to your component above:

Define a Django view that includes a component attribute with a staticfile
path to the component you've defined, as well as the typical template_name
attribute representing the path to a Django template. The combination of these
two attributes will allow us to render the component in the view's template.

class Home(TemplateView): title = 'Home' template_name = 'my_new_app/index.html' component = 'js/pages/index.js' # Staticfile path to your component code

I'll adjust the wording here to make it a little bit clearer where view.component is coming from.

jeancochrane · 2020-06-25T16:31:11Z

.../templates/new-django-app/{{cookiecutter.app_name}}/{{cookiecutter.module_name}}/settings.py

@@ -155,16 +154,11 @@

 # Django Compressor configs
 COMPRESS_PRECOMPILERS = (
-    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
+    ('module', 'npx browserify {infile} -t [ babelify --presets [ @babel/preset-env ] ] > {outfile}'),


Thanks 😄

hancush

This looks awesome, @jeancochrane! Thank you so much for your work on this. :-)

Add docs and update templates for Django-React integration

e58a2d8

jeancochrane requested a review from hancush June 18, 2020 17:07

hancush requested changes Jun 24, 2020

View reviewed changes

jeancochrane and others added 3 commits June 25, 2020 10:56

Apply changes to django-react docs from code review

ae20615

- Fix "template tag" typo - Change app name in django-react template Co-authored-by: hannah cushman garland <[email protected]>

Consolidate django-compressor docs and provide high-level Django-Reac…

30baa3a

…t integration overview

Clarify source of view.component variable in django-react-integration.md

2b84468

jeancochrane commented Jun 25, 2020

View reviewed changes

jeancochrane requested a review from hancush June 25, 2020 16:38

hancush approved these changes Jun 25, 2020

View reviewed changes

jeancochrane merged commit 84f4229 into master Jun 25, 2020

jeancochrane deleted the jfc/django-react-integration branch June 25, 2020 16:44

hancush mentioned this pull request Sep 28, 2020

Specify NODE_PATH so locally installed packages can be found #116

Merged

hancush mentioned this pull request Sep 13, 2021

[WIP] Headless CMS for static sites #223

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add docs and update templates for Django-React integration #84

Add docs and update templates for Django-React integration #84

jeancochrane commented Jun 18, 2020

hancush left a comment

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

hancush Jun 25, 2020

hancush Jun 24, 2020

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

hancush Jun 24, 2020

jeancochrane Jun 25, 2020

jeancochrane left a comment

jeancochrane Jun 25, 2020

jeancochrane Jun 25, 2020

jeancochrane Jun 25, 2020

jeancochrane Jun 25, 2020

jeancochrane Jun 25, 2020

jeancochrane Jun 25, 2020

hancush left a comment


		### Install Node packages

		Using `yarn add` or `npm install`, Update your `package.json` file to include

Add docs and update templates for Django-React integration #84

Add docs and update templates for Django-React integration #84

Conversation

jeancochrane commented Jun 18, 2020

Overview

Testing Instructions

hancush left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeancochrane left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hancush left a comment

Choose a reason for hiding this comment