Django webpack react

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+__pycache__
+dist
+*.sqlite3

django-webpack-react/README.md

@@ -0,0 +1,30 @@
+# Intro
+- webpack generates a `webpack-stats.json` upon webpack start up
+- Django uses `webpack-stats.json` to render the asset source path correctly
+- Django should look into `dist/` to collect the staticfiles generated by
+  webpack with production mode
+
+# Prerequites
+- python3.x
+- pip
+- git
+- npm
+- yarn
+
+# Django Webpack Loader
+- include webpack loader configs at settings.py
+
+# Webpack
+- use command alias at "scripts" within `package.json`
+
+## Webpack Dev
+- run `yarn dev`
+- webpack will startup a dev server for hot reload
+
+## Webpack Production
+- run `yarn prod`
+- webpack will generate bundle files to `dist/`
+
+## Yarn upgrade
+- run `yarn upgrade`
+- upgrade all dependencies in `package.json`

django-webpack-react/bootstrap.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+
+PROJECT_NAME="$1"
+
+if [[ -z $PROJECT_NAME ]]; then
+    echo "no project name given"
+    exit 1
+fi
+
+function venv {
+    echo "
+    - create a virtual env (either anaconda, virtualenv or virtualenvwrapper)
+        - conda: conda create -n $PROJECT_NAME python=3.5.2
+        - virtualenv: virtualenv -p /usr/bin/python3.5.2 $PROJECT_NAME
+        - virtualenvwrapper: mkvirtualenv --python=python3.5.2 $PROJECT_NAME
+
+    - activate the virtual env into current shell session
+        - conda: source activate $PROJECT_NAME
+        - virtualenv: source $PROJECT_NAME/bin/activate
+        - virtualenvwrapper: workon $PROJECT_NAME
+    "
+}
+function project-structure {
+    echo "
+    Your new project should look something like this
+        $PROJECT_NAME
+        ├── assets
+        │   └── js
+        │       ├── app.js
+        │       └── index.js
+        ├── db.sqlite3
+        ├── $PROJECT_NAME
+        │   ├── __init__.py
+        │   ├── __pycache__
+        │   ├── settings.py
+        │   ├── urls.py
+        │   └── wsgi.py
+        ├── dist
+        ├── manage.py
+        ├── node_modules
+        ├── package.json
+        ├── requirements.txt
+        ├── templates
+        │   └── home.html
+        ├── webpack.config.js
+        └── yarn.lock
+    "
+}
+
+
+function bootstrap {
+
+    pip install django django-webpack-loader psycopg2
+
+    django-admin startproject $PROJECT_NAME
+    pip freeze > $PROJECT_NAME/requirements.txt
+    mkdir -p $PROJECT_NAME/dist
+    cp -a scaffolding/assets $PROJECT_NAME/assets
+
+    # link dotfiles
+    cp scaffolding/babelrc $PROJECT_NAME/.babelrc
+    cp scaffolding/eslintignore $PROJECT_NAME/.eslintignore
+    cp scaffolding/gitignore $PROJECT_NAME/.gitignore
+    cp scaffolding/editorconfig $PROJECT_NAME/.editorconfig
+    cp scaffolding/eslintrc.yaml $PROJECT_NAME/.eslintrc.yaml
+
+    cp scaffolding/package.json $PROJECT_NAME/package.json
+    cp scaffolding/webpack.config.js $PROJECT_NAME/webpack.config.js
+    cp scaffolding/yarn.lock $PROJECT_NAME/yarn.lock
+    cp -a scaffolding/django/templates $PROJECT_NAME
+    cp scaffolding/django/urls.py $PROJECT_NAME/$PROJECT_NAME/urls.py
+    cat scaffolding/django/settings.py >> $PROJECT_NAME/$PROJECT_NAME/settings.py
+    sed -ie "s#DIRS.*\],#DIRS\': \[\'\{\}\/\{\}\'\.format\(BASE_DIR, 'templates\'\)\],#g" $PROJECT_NAME/$PROJECT_NAME/settings.py
+    cd $PROJECT_NAME
+    git init
+    yarn install
+    python manage.py migrate
+}
+
+bootstrap
+echo "$(project-structure)"

django-webpack-react/scaffolding/assets/js/app.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+
+export default function App({ text }) {
+    return (<h1> some {text} </h1>)
+}
+App.propTypes = {
+    text: PropTypes.string.isRequired
+}
+

django-webpack-react/scaffolding/assets/js/index.js

@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from 'app'
+
+ReactDOM.render(<App text="testing" />, document.getElementById('app'));

django-webpack-react/scaffolding/babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [[ "es2015", { "modules": false } ], "react"],
+  "plugins": ["transform-decorators-legacy"]
+}

django-webpack-react/scaffolding/django/settings.py

@@ -0,0 +1,15 @@
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, 'dist'),
+)
+
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'BUNDLE_DIR_NAME': '',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
+    }
+}
+
+INSTALLED_APPS += [
+    'webpack_loader',
+]

django-webpack-react/scaffolding/django/templates/home.html

@@ -0,0 +1,13 @@
+{% load render_bundle from webpack_loader %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title></title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    {% render_bundle 'app' %}
+  </body>
+</html>

django-webpack-react/scaffolding/django/urls.py

@@ -0,0 +1,23 @@
+"""demo URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/1.10/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.conf.urls import url, include
+    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
+"""
+from django.conf.urls import url
+from django.contrib import admin
+from django.views.generic import TemplateView
+
+urlpatterns = [
+    url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
+    url(r'^admin/', admin.site.urls),
+]

django-webpack-react/scaffolding/editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,jsx,html,sass,py}]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+trim_trailing_whitespace = true

django-webpack-react/scaffolding/eslintignore

@@ -0,0 +1 @@
+node_modules/**

django-webpack-react/scaffolding/eslintrc.yaml

@@ -0,0 +1,82 @@
+---
+  extends:
+    - plugin:react/recommended
+
+  env:
+    browser: true
+    node: true
+    es6: true
+
+  parserOptions:
+   ecmaVersion: 6
+   sourceType: "module"
+   ecmaFeatures:
+    jsx: true
+
+  globals:
+    __DEV__: true
+    __SERVER__: true
+
+  plugins:
+    - react
+
+  rules:
+    react/jsx-uses-vars: 1
+    react/prop-types: [1, { ignore: [children] }]
+
+    indent: ["error", 4]
+    semi: 0
+    key-spacing: 1
+    curly: 0
+    consistent-return: 0
+    space-infix-ops: 1
+    camelcase: 0
+    no-spaced-func: 1
+    no-alert: 1
+    eol-last: 1
+    comma-spacing: 1
+    eqeqeq: 1
+
+    # possible errors
+    comma-dangle: 0
+    no-cond-assign: 2
+    no-console: 0
+    no-constant-condition: 2
+    no-control-regex: 2
+    no-debugger: 2
+    no-dupe-args: 2
+    no-dupe-keys: 2
+    no-duplicate-case: 2
+    no-empty-character-class: 2
+    no-empty: 2
+    no-ex-assign: 2
+    no-extra-boolean-cast: 2
+    no-extra-parens: 0
+    no-extra-semi: 2
+    no-func-assign: 2
+    no-inner-declarations: 2
+    no-invalid-regexp: 2
+    no-irregular-whitespace: 2
+    no-negated-in-lhs: 2
+    no-obj-calls: 2
+    no-regex-spaces: 2
+    no-sparse-arrays: 2
+    no-unexpected-multiline: 2
+    no-unreachable: 2
+    use-isnan: 2
+    valid-jsdoc: 2
+    valid-typeof: 2
+
+    no-redeclare: 2
+
+    init-declarations: 2
+    no-catch-shadow: 2
+    no-delete-var: 2
+    no-label-var: 2
+    no-shadow-restricted-names: 2
+    no-shadow: 2
+    no-undef-init: 2
+    no-undef: 2
+    no-undefined: 2
+    no-unused-vars: 2
+    no-use-before-define: 2

django-webpack-react/scaffolding/gitignore

@@ -0,0 +1,5 @@
+node_modules
+__pycache__
+dist
+*.sqlite3
+webpack-stats*.json

django-webpack-react/scaffolding/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "App",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^3.19.0",
+    "eslint-plugin-react": "^7.0.0",
+    "prop-types": "^15.5.9",
+    "webpack": "^2.5.1",
+    "webpack-bundle-tracker": "^0.2.0",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "dependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "prod": "NODE_ENV=production webpack",
+    "lint": "eslint assets",
+    "fix": "eslint --fix assets",
+    "test": ""
+  }
+}