From ad0ad4eac89842f8952399180bfade97327d9bc5 Mon Sep 17 00:00:00 2001 From: Drew Larson Date: Wed, 1 Jun 2016 18:10:56 -0600 Subject: [PATCH] Basic reactjs support. --- bikeshop_project/assets/js/index.jsx | 41 ++++++++++++++++ bikeshop_project/bikeshop/settings/base.py | 16 ++++++- .../bikeshop/settings/development.py | 2 +- bikeshop_project/core/templates/base.html | 19 +------- .../core/templates/dashboard.html | 8 +++- bikeshop_project/package.json | 34 +++++++++++++ bikeshop_project/webpack-stats.json | 1 + bikeshop_project/webpack.config.js | 48 +++++++++++++++++++ bower.json | 3 +- requirements/development.txt | 3 +- 10 files changed, 153 insertions(+), 22 deletions(-) create mode 100644 bikeshop_project/assets/js/index.jsx create mode 100644 bikeshop_project/package.json create mode 100644 bikeshop_project/webpack-stats.json create mode 100644 bikeshop_project/webpack.config.js diff --git a/bikeshop_project/assets/js/index.jsx b/bikeshop_project/assets/js/index.jsx new file mode 100644 index 0000000..59b0978 --- /dev/null +++ b/bikeshop_project/assets/js/index.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Autocomplete from 'react-toolbox/lib/autocomplete'; + +const source = { + 'ES-es': 'Spain', + 'TH-th': 'Thailand', + 'EN-gb': 'England', + 'EN-en': 'USA' +}; + +class AutocompleteTest extends React.Component { + state = { + countries: ['ES-es', 'TH-th'] + }; + + handleChange = (value) => { + this.setState({countries: value}); + }; + + render () { + return ( + + ); + } +} + +class App extends React.Component { + render () { + return () + } +} + +ReactDOM.render(, document.getElementById('root')); diff --git a/bikeshop_project/bikeshop/settings/base.py b/bikeshop_project/bikeshop/settings/base.py index 3de667f..6d32945 100644 --- a/bikeshop_project/bikeshop/settings/base.py +++ b/bikeshop_project/bikeshop/settings/base.py @@ -29,7 +29,10 @@ INSTALLED_APPS = [ 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', + + 'webpack_loader', 'compressor', + 'registration', 'core', ] @@ -120,6 +123,7 @@ STATICFILES_FINDERS = ( ) STATICFILES_DIRS = [ ('vendor', os.path.join(BASE_DIR, '../vendor')), + os.path.join(BASE_DIR, '../assets') ] STATIC_ROOT = 'static' STATIC_URL = '/static/' @@ -128,4 +132,14 @@ AUTH_USER_MODEL = 'registration.Member' COMPRESS_PRECOMPILERS = ( ('text/x-scss', 'django_libsass.SassCompiler'), -) \ No newline at end of file +) + +WEBPACK_LOADER = { + 'DEFAULT': { + 'CACHE': False, + 'BUNDLE_DIR_NAME': 'bundles/', # must end with slash + 'STATS_FILE': os.path.join(BASE_DIR, '../webpack-stats.json'), + 'POLL_INTERVAL': 0.1, + 'IGNORE': ['.+\.hot-update.js', '.+\.map'] + } +} \ No newline at end of file diff --git a/bikeshop_project/bikeshop/settings/development.py b/bikeshop_project/bikeshop/settings/development.py index 67b48e7..8b641d8 100644 --- a/bikeshop_project/bikeshop/settings/development.py +++ b/bikeshop_project/bikeshop/settings/development.py @@ -53,4 +53,4 @@ INSTALLED_APPS += [ # Don't worry about IP addresses, just show the toolbar. DEBUG_TOOLBAR_CONFIG = { 'SHOW_TOOLBAR_CALLBACK': lambda *args: True -} +} \ No newline at end of file diff --git a/bikeshop_project/core/templates/base.html b/bikeshop_project/core/templates/base.html index 26a9c46..03a3685 100644 --- a/bikeshop_project/core/templates/base.html +++ b/bikeshop_project/core/templates/base.html @@ -1,21 +1,5 @@ {% load compress staticfiles %} - - + @@ -47,6 +31,7 @@ + {% compress css %} {% endcompress %} diff --git a/bikeshop_project/core/templates/dashboard.html b/bikeshop_project/core/templates/dashboard.html index 838aa18..19c0459 100644 --- a/bikeshop_project/core/templates/dashboard.html +++ b/bikeshop_project/core/templates/dashboard.html @@ -1 +1,7 @@ -{% extends 'base.html' %} \ No newline at end of file +{% extends 'base.html' %} +{% load render_bundle from webpack_loader %} + +{% block content %} +
+ {% render_bundle 'main' %} +{% endblock %} \ No newline at end of file diff --git a/bikeshop_project/package.json b/bikeshop_project/package.json new file mode 100644 index 0000000..312646d --- /dev/null +++ b/bikeshop_project/package.json @@ -0,0 +1,34 @@ +{ + "name": "workstand", + "version": "0.0.1", + "description": "A membership management app for the BCBC.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "babel": "^6.5.2", + "babel-core": "^6.9.1", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", + "css-loader": "^0.23.1", + "extract-text-webpack-plugin": "^1.0.1", + "i": "^0.3.5", + "node-sass": "^3.4.2", + "normalize.css": "^4.1.1", + "postcss-loader": "^0.9.1", + "react": "^15.1.0", + "react-addons-css-transition-group": "^15.1.0", + "react-dom": "^15.1.0", + "react-toolbox": "^0.16.2", + "sass-loader": "^3.2.0", + "style-loader": "^0.13.1", + "toolbox-loader": "0.0.3", + "webpack": "^1.13.1", + "webpack-bundle-tracker": "0.0.93" + } +} diff --git a/bikeshop_project/webpack-stats.json b/bikeshop_project/webpack-stats.json new file mode 100644 index 0000000..f162c4c --- /dev/null +++ b/bikeshop_project/webpack-stats.json @@ -0,0 +1 @@ +{"status":"done","chunks":{"main":[{"name":"main-68cfa02cc7400e2d6bcc.js","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/main-68cfa02cc7400e2d6bcc.js"},{"name":"react-toolbox.css","path":"/Users/drew/Development/bikeshop/bikeshop_project/assets/bundles/react-toolbox.css"}]}} \ No newline at end of file diff --git a/bikeshop_project/webpack.config.js b/bikeshop_project/webpack.config.js new file mode 100644 index 0000000..d5e5bca --- /dev/null +++ b/bikeshop_project/webpack.config.js @@ -0,0 +1,48 @@ +const path = require("path"); +const webpack = require('webpack'); +const BundleTracker = require('webpack-bundle-tracker'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const autoprefixer = require('autoprefixer'); + +module.exports = { + context: __dirname, + devtool: 'inline-source-map', + entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs + + output: { + path: path.resolve('./assets/bundles/'), + filename: "[name]-[hash].js" + }, + + plugins: [ + new BundleTracker({filename: './webpack-stats.json'}), + new ExtractTextPlugin('react-toolbox.css', { allChunks: true }), + new webpack.NoErrorsPlugin() + ], + + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader', + query: { + presets: ['es2015', 'stage-0', 'react'] + } + }, + { + test: /(\.scss|\.css)$/, + loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox') + } + ] + }, + resolve: { + modulesDirectories: [ + 'node_modules', + 'bower_components', + path.resolve(__dirname, './node_modules') + ], + extensions: ['', '.js', '.jsx', '.scss'] + }, + postcss: [autoprefixer] +} \ No newline at end of file diff --git a/bower.json b/bower.json index 7c4a3af..e3a2416 100644 --- a/bower.json +++ b/bower.json @@ -18,6 +18,7 @@ ], "dependencies": { "material-design-lite": "^1.1.3", - "md-date-time-picker": "https://github.com/puranjayjain/md-date-time-picker.git#master" + "md-date-time-picker": "https://github.com/puranjayjain/md-date-time-picker.git#master", + "normalize-css": "normalize.css#^4.1.1" } } diff --git a/requirements/development.txt b/requirements/development.txt index b570dc0..da6a0d9 100644 --- a/requirements/development.txt +++ b/requirements/development.txt @@ -2,4 +2,5 @@ -r testing.txt django-debug-toolbar PyYAML -gunicorn==19.4.5 \ No newline at end of file +gunicorn==19.4.5 +django-webpack-loader \ No newline at end of file