new layout for app/ folder

 - leverage collectstatic on app/ (fixes #6, fixes #21)
 - replace RequireJS build with ES modules (see wq/wq.app#111)
 - move --with-npm template to @wq/cra-template (in wq.start repo)
 - implement service worker (see wq/wq.app#63, wq/wq.app#107)
 - drop support for PhoneGap Build and Application Cache (see wq/wq.app#121)

README.md

@@ -3,30 +3,34 @@
 
 This is the recommended Django project template for projects utilizing the [wq framework].  It uses [wq.app] for the front end and [wq.db] as the backend component.   This template is meant to be used together with [wq.start].  See wq's [Getting Started] docs for more information.
 
-As of version 1.2, this template provides two alternatives for managing JavaScript dependencies ([@wq/app]/[wq.app]).  The alternatives can be selected by passing the `--with-npm` or `--without-npm` arguments to the `wq start` command.
+This template provides two alternatives for managing JavaScript dependencies ([@wq/app]/[wq.app]).  The alternatives can be selected by passing the `--with-npm` or `--without-npm` arguments to the `wq start` command.
 
- * `--with-npm`: `wq start` will generate an app/ folder based on [Create React App][create-react-app] and install [@wq/app] from NPM.
- * `--without-npm`: `wq start` will generate an app/ folder with a [RequireJS]-compatible layout and use the AMD-format JavaScript libraries included in the [wq.app] PyPI package.  (This was the default and only option in wq 1.1 and earlier.)
+ * `--with-npm`: `wq start` will generate an app/ folder based on the [@wq Create React App template][@wq/cra-template] and install [@wq/app] and [@wq/material] from NPM.
+ * `--without-npm`: `wq start` will generate an app/ folder containing a minimal web-ready JavaScript configuration that can be merged with [wq.app]'s assets by running `./manage.py collectstatic`.  This leverages a new pre-compiled and minified ESM module, [**wq.js**](https://npmjs.com/package/wq), introduced in wq.app 1.3.
+
+> Note: Existing RequireJS + jQuery Mobile + Mustache projects (created with wq.start 1.2 and earlier) will still work with wq.app 1.3.  However, wq.start 1.3 does not support creating new RequireJS projects.  Remaining support for RequireJS and jQuery Mobile will be removed in wq.app 2.0.
 
 ### Rationale
 
-This project template is also useful as an example of how to build a web app with [Create React App][create-react-app] (or [RequireJS]) and a [Django REST Framework] backend.  It differs from the default Django and Create React App templates in a few key ways:
+This project template is also useful as an example of how to build a web app with [React] and a [Django REST Framework] backend.  It differs from the default Django and Create React App templates in a few key ways:
 
- * Most front end files are kept in the `app/` folder, with the idea that they will be built with react-scripts (or RequireJS).  This clean separation between the front end and backend components makes it easier to wrap the front end in [PhoneGap] for release on app stores.
+ * Key front end files are kept in the `app/` folder, making it easier to customize the gerated [installable PWA], and (optionally) to compile the front end with React Native or Expo for distribution on the app stores.
  * Because of this separation, the root of the Django project is in `db/` rather than at the top level of the project.
- * Mustache templates are in the top level folder `templates/`, because they are [shared between the client and the server](http://wq.io/docs/templates).
+ * The root `ReactDOM.render()` call and Redux initialization are handled automatically by [@wq/react] and [@wq/store].  It is not necessary to explicitly define any React components, except to override the default [@wq/material] UI.
  * A default Apache2 WSGI configuration is included in `conf/`
 
-See the [Create React App documentation][create-react-app] for more information on the available NPM scripts.
-
 [wq framework]: http://wq.io/
 [wq.app]: https://wq.io/wq.app
-[@wq/app]: https://wq.io/docs/app-js
 [wq.db]: https://wq.io/wq.db
 [wq.start]: https://wq.io/wq.start
 [Getting Started]: https://wq.io/docs/setup
-[create-react-app]: https://facebook.github.io/create-react-app/docs/getting-started
-[RequireJS]: http://requirejs.org
+
+[@wq/app]: https://wq.io/docs/app-js
+[@wq/cra-template]: https://github.com/wq/wq.start/tree/packages/cra-template
+[@wq/material]: https://github.com/wq/wq.app/tree/packages/material
+[@wq/react]: https://github.com/wq/wq.app/tree/packages/react
+[@wq/store]: https://github.com/wq/wq.app/tree/packages/store
+
+[React]: https://reactjs.org/
 [Django REST Framework]: http://www.django-rest-framework.org
-[build process]: http://wq.io/docs/build
-[PhoneGap]: http://phonegap.com
+[installable PWA]: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs

app/README.md

@@ -0,0 +1,3 @@
+This folder is only for use with `wq start --without-npm`.  Projects using `wq start --with-npm` will use [@wq/cra-template] instead.
+
+[@wq/cra-template]: https://github.com/wq/wq.start/tree/master/packages/cra-template

app/css/project_name.css

@@ -0,0 +1 @@
+@import url("./wq.css");

app/js/project_name.js

@@ -1,9 +1,37 @@
-requirejs.config({
-    'baseUrl': '/js/lib',
-    'paths': {
-        '{{ project_name }}': '../{{ project_name }}',
-        'data': '../data/'
+import wq from './wq.js';
+import config from './data/config.js';
+import version from './data/version.js';
+
+wq.use({
+    context() {
+        return { version };
     }
 });
 
-requirejs(['{{ project_name }}/main']);
+wq.init({
+    ...config,
+    router: {
+        'base_url': ''
+    },
+    store: {
+	'service': '',
+	'defaults': {'format': 'json'}
+    },
+    material: {
+        theme: {
+            primary: '#550099',
+            secondary: '#0dccb1'
+        }
+    },
+    map: {
+	bounds: [[44.7, -93.6], [45.2, -92.8]]
+    }
+}).then(() => {
+    wq.prefetchAll();
+});
+
+if (config.debug) {
+    window.wq = wq;
+}
+
+navigator.serviceWorker.register('/service-worker.js');