React dependencies, gulp tasks, npm package

izdi · Mar 7, 2015 · 1195fd9 · 1195fd9
1 parent ccfc410
commit 1195fd9
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,8 +3,10 @@
 *.sqlite3
 *.sql
 
-### IntelliJ ###
 *.iml
 *.ipr
 *.iws
-.idea/
+.idea
+
+node_modules
+static/dist/js
diff --git a/README b/README
@@ -0,0 +1,6 @@
+# Django/React skeleton 0.0.1
+## Realtime Slack integration for Django projects using Tornado and React
+1. Install python dependencies `sudo pip install -r requirements.txt`
+2. Install `sudo npm install`
+3. Run `gulp` to compile React code
+4. Run `gulp watch` to recompile on auto update
diff --git a/djslack/templates/base.html b/djslack/templates/base.html
@@ -1,7 +1,13 @@
+{% load i18n %}
+{% load static %}
+
 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="{% static 'dist/css/main.css' %}"/>
+
     <title>Django Slack Chat</title>
 </head>
 <body>
@@ -23,5 +29,8 @@
         <a href='{% url 'slack_auth' %}'>Get slacked</a>
     {% endif %}
 {% endblock %}
+
+<script src="{% static 'dist/js/main.js' %}"></script>
+
 </body>
 </html>
diff --git a/djslack/templates/slack.html b/djslack/templates/slack.html
@@ -1,12 +1,3 @@
-<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
-<script>
-    $(document).ready(function () {
-        $('#main').on('click', function () {
+<div id="slack-container"></div>
 
-        }
-    });
-</script>
 
-<textarea></textarea>
-<br/>
-<a href='{% url '' %}'>Connect</a>
diff --git a/djslack/views.py b/djslack/views.py
@@ -25,8 +25,6 @@ def dispatch(self, request, *args, **kwargs):
         return super(SlackAuthView, self).dispatch(request, *args, **kwargs)
 
     def get(self, request, *args, **kwargs):
-        import ipdb
-        ipdb.set_trace()
         code = request.GET.get('code')
         if not code:
             return self.auth_request()

diff --git a/frontend/app.js b/frontend/app.js
@@ -0,0 +1,9 @@
+/** @jsx React.DOM */
+
+var ChatArea = require('./components/ChatArea');
+var React = require('react');
+
+React.renderComponent(
+    <ChatArea />,
+    document.getElementById('slack-container')
+);
diff --git a/frontend/components/ChatArea.js b/frontend/components/ChatArea.js
@@ -0,0 +1,16 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+
+var ChatArea = React.createClass({
+    render: function () {
+        return (
+            <div className='chat-wrapper'>
+                <button>Instantiate connection</button>
+                <textarea className='chat-frame'></textarea>
+            </div>
+        )
+    }
+});
+
+module.exports = ChatArea;
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,16 @@
+var gulp = require('gulp');
+var browserify = require('gulp-browserify');
+var concat = require('gulp-concat');
+
+gulp.task('browserify', function() {
+    gulp.src('frontend/app.js')
+        .pipe(browserify({transform: 'reactify'}))
+        .pipe(concat('main.js'))
+        .pipe(gulp.dest('static/dist/js'));
+});
+
+gulp.task('default', ['browserify']);
+
+gulp.task('watch', function () {
+    gulp.watch('frontend/**/*.*', ['default']);
+});
diff --git a/manage.py b/manage.py
@@ -3,7 +3,7 @@
 import sys
 
 if __name__ == "__main__":
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings")
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings.local")
 
     from django.core.management import execute_from_command_line
 

diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "djslack",
+  "version": "0.0.1",
+  "description": "Slack integration for Django projects using ReactJS as a view layer.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/izdi/djslack.git"
+  },
+  "keywords": [
+    "python",
+    "django",
+    "react",
+    "tornado"
+  ],
+  "author": "izdi",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/izdi/djslack/issues"
+  },
+  "homepage": "https://github.com/izdi/djslack",
+  "dependencies": {
+    "gulp": "^3.8.11",
+    "gulp-browserify": "^0.5.1",
+    "gulp-concat": "^2.5.2",
+    "react": "^0.12.2",
+    "reactify": "^1.0.0"
+  }
+}
diff --git a/project/settings/__init__.py b/project/settings/__init__.py
@@ -0,0 +1 @@
+
diff --git a/project/settings.py → project/settings/base.py b/project/settings.py → project/settings/base.py
@@ -10,7 +10,7 @@
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 import os
-BASE_DIR = os.path.dirname(os.path.dirname(__file__))
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(__file__)))
 
 
 # Quick-start development settings - unsuitable for production
@@ -86,6 +86,12 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/1.7/howto/static-files/
 STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+)
 
 # slack
 SLACK_CLIENT_ID = os.environ.get('SLACK_CLIENT_ID')

diff --git a/project/settings/local.py b/project/settings/local.py
@@ -0,0 +1,6 @@
+from .base import *
+
+
+STATIC_ROOT = ''
+STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), )
+
diff --git a/requirements.txt b/requirements.txt
@@ -1,4 +1,8 @@
+backports.ssl-match-hostname==3.4.0.2
+certifi==14.5.14
 Django==1.7.3
+ipdb==0.8
 ipython==2.3.1
 psycopg2==2.5.4
 requests==2.5.1
+tornado==4.1
diff --git a/static/dist/css/main.css b/static/dist/css/main.css
@@ -0,0 +1,3 @@
+textarea {
+    display: block;
+}
diff --git a/tornado_server.py b/tornado_server.py