Merge pull request #5 from JeffreyMFarley/djangofy

Provide a thin Django implementation for the UI

.gitignore

@@ -48,6 +48,7 @@ Thumbs.db
 *.egg-info/
 __pycache__/
 *.py[cod]
+.eggs/
 .env
 
 # Django #

CHANGELOG.md

@@ -1,17 +1,5 @@
-All notable changes to this project will be documented in this file.
-We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.
+This project does not use `CHANGELOG.md` to track release changes.
 
+See the project repository release history at:
 
-## x.y.z - YYYY-MM-DD
-
-### Added
-- Lorem ipsum dolor sit amet
-
-### Deprecated
-- Nothing.
-
-### Removed
-- Nothing.
-
-### Fixed
-- Nothing.
+https://github.com/cfpb/ccdb5-ui/releases

INSTALL.md

@@ -3,9 +3,17 @@
 ## Installing
 
 ```bash
+# Clone the project from github
 git clone https://github.com/cfpb/ccdb5-ui.git
 cd ccdb5-ui
-npm install
+
+# Setup python development
+mkvirtualenv ccdb5-ui
+pip install -r requirements.txt
+
+# Setup node/react/webpack development
+npm install  # yarn install also works
+npm run build
 ```
 
 ## Configuring
@@ -14,7 +22,7 @@ _TODO: Define how the API URL is injected into the codebase_
 ## Verifying the build
 
 ```bash
-npm start
+python manage.py runserver
 ```
 
-Open http://localhost:3000 to view it in the browser.
+Open http://localhost:8000 to view it in the browser.

README.md

@@ -23,6 +23,10 @@ Unit testing of the application is performed within
 
 [npm](https://www.npmjs.com/) is used to manage the build/test/deploy cycle.
 
+The `ccdb5_ui` (note the underscore) directory contains a thin [Django](https://www.djangoproject.com/) 
+implementation that allows it to be used as a plugin for
+[CFPB's public website](https://github.com/cfpb/cfgov-refresh).
+
 #### Status
 This is so pre-alpha it is omega
 

ccdb5_ui/config/settings.py

@@ -0,0 +1,92 @@
+"""
+Django settings for ccdb5_ui project.
+
+Generated by 'django-admin startproject' using Django 1.8.15.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.8/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/1.8/ref/settings/
+"""
+
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+import os
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/1.8/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = os.environ.get('SECRET_KEY', os.urandom(32))
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+# This is set here so that we can use the local server, this will not
+# be part of the cfgov-refresh settings
+STANDALONE = True
+
+# Application definition
+
+INSTALLED_APPS = (
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.staticfiles',
+    'ccdb5_ui'
+)
+
+MIDDLEWARE_CLASSES = (
+)
+
+ROOT_URLCONF = 'ccdb5_ui.config.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'ccdb5_ui.config.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
+
+DATABASES = {}
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/1.8/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.8/howto/static-files/
+
+STATIC_URL = '/static/'
+
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')

ccdb5_ui/config/urls.py

@@ -0,0 +1,6 @@
+from django.conf.urls import url
+from ccdb5_ui.views import CCDB5MainView
+
+urlpatterns = [
+    url(r'^$', CCDB5MainView.as_view()),
+]

ccdb5_ui/config/wsgi.py

@@ -0,0 +1,4 @@
+import os
+from django.core.wsgi import get_wsgi_application
+
+application = get_wsgi_application()

ccdb5_ui/templates/base.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    {% block meta_viewport %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% endblock meta_viewport %}
+    <title>
+        {% block title %}
+        {% endblock title %}
+    </title>
+{% block css %}
+{% endblock css %}
+{% block app_js %}
+{% endblock app_js %}
+</head>
+
+<body>
+{% block body %}
+{% block header %}
+{% endblock header %}
+{% block content %}
+{% endblock content %}
+{% endblock body %}
+
+{% block page_js %}
+{% endblock page_js %}
+</body>
+</html>

ccdb5_ui/templates/index.html

@@ -0,0 +1,25 @@
+{% extends ccdb5_base_template|default:'front/base_nonresponsive.html' %}
+
+{% load static %}
+
+{% block css %}
+{% endblock %}
+
+{% block title %}Search the Consumer Complaint Database{% endblock %}
+
+{% block content %}
+<div id="root"></div>
+{% endblock %}
+
+{% block page_js %}
+  <script src="{% static "ccdb5.min.js" %}" type="text/javascript"></script>
+  <script type="text/javascript">
+    ReactDOM.render(
+      React.createElement(ccdb5_ui.App, {}, null),
+      document.getElementById('root')
+    );
+  </script>
+{% endblock %}
+
+{% block app_js %}
+{% endblock %}

ccdb5_ui/views.py

@@ -0,0 +1,23 @@
+from django.views.generic.base import TemplateView
+from django.conf import settings
+
+try:
+    STANDALONE = settings.STANDALONE
+except:  # pragma: no cover
+    STANDALONE = False
+
+
+if STANDALONE:
+    BASE_TEMPLATE = 'base.html'
+else:  # pragma: no cover
+    BASE_TEMPLATE = 'front/base_nonresponsive.html'
+
+
+class CCDB5MainView(TemplateView):
+    template_name = 'index.html'
+    base_template = BASE_TEMPLATE
+
+    def get_context_data(self, **kwargs):
+        context = super(CCDB5MainView, self).get_context_data(**kwargs)
+        context['ccdb5_base_template'] = self.base_template
+        return context

config/paths.js

@@ -65,7 +65,7 @@ function getServedPath(appPackageJson) {
 
 // config after eject: we're in ./config/
 module.exports = {
-  appBuild: resolveApp('dist'),
+  appBuild: resolveApp('ccdb5_ui/static'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/App.jsx'),

config/webpack-config-base.js

@@ -41,13 +41,7 @@ module.exports = {
         test: /\.json$/,
         loader: 'json'
       },
-      {
-        test: /\.svg$/,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[ext]'
-        }
-      },
+      { test: /\.svg$/, loader: 'ignore-loader' },
       {
         test: /\.less$/,
         loader: 'style!css!less'

config/webpack.config.prod.js

@@ -55,8 +55,11 @@ module.exports = merge({
           /\.(js|jsx)$/,
           /\.css$/,
           /\.json$/,
+          /\.less$/,
+          /\.eot$/,
           /\.svg$/,
-          /\.less$/
+          /\.ttf$/,
+          /\.woff$/
         ],
         loader: 'url',
         query: {
@@ -90,7 +93,11 @@ module.exports = merge({
           extractTextPluginOptions
         )
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-      }
+      },
+      // Do not load the Captial Framework font dependencies
+      { test: /\.eot$/, loader: 'ignore-loader' },
+      { test: /\.ttf$/, loader: 'ignore-loader' },
+      { test: /\.woff$/, loader: 'ignore-loader' }
       // ** STOP ** Are you adding a new loader?
       // Remember to add the new extension(s) to the "url" loader exclusion list.
     ]
@@ -102,23 +109,6 @@ module.exports = merge({
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
     new InterpolateHtmlPlugin(env.raw),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
-      }
-    }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.

manage.py

@@ -0,0 +1,10 @@
+#!/usr/bin/env python
+import os
+import sys
+
+if __name__ == "__main__":
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "ccdb5_ui.config.settings")
+
+    from django.core.management import execute_from_command_line
+
+    execute_from_command_line(sys.argv)