make production build

server/app.express.js

@@ -3,55 +3,26 @@
  */
 
 import express from 'express';
-import graphQLHTTP from 'express-graphql';
 import path from 'path';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import schema from './config/graphql/schema';
 
 import DB from './config/database';
+import routes from './routes';
 
 const APP_PORT = 3000;
-const GRAPHQL_PORT = 8080;
+const JS_PORT = 3000;
 
-var rest_api = express();
+var app = express();
 
 DB.sync().then(()=>{
-  rest_api
-});
 
-/*
- * Compile and Serve Relay App w/ Webpack
- */
-
-var compiler = webpack({
-  entry: {
-    app: path.resolve(__dirname, 'lib', 'relay', 'app.relay.js')
-  },
-  module: {
-    loaders: [
-      {
-        exclude: /node_modules/,
-        loader: 'babel',
-        query: {
-          plugins: ['./build/babelRelayPlugin'],
-        },
-        test: /\.js$/
-      }
-    ]
-  },
-  output: {filename: 'application.js', path: '/'}
-});
-var dev_server = new WebpackDevServer(compiler, {
-  contentBase: '/public/',
-  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
-  publicPath: '/assets/js/',
-  stats: {colors: true}
-});
+routes(app);
 
 /*
  * Logging, Cookie, JSON Parsing Middleware
- *
+ */
 
 import favicon from 'serve-favicon';
 import logger from 'morgan';
@@ -59,11 +30,10 @@ import cookieParser from 'cookie-parser';
 import bodyParser from 'bodyParser';
 
 // uncomment after placing your favicon in /public
-//app.use(favicon(__dirname + '/public/favicon.ico'));
+app.use(favicon(__dirname + '/public/favicon.ico'));
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
-app.use(cookieParser());*/
 
 /*
  *  Serve Vendor Scripts, CSS, and Templates
@@ -71,11 +41,11 @@ app.use(cookieParser());*/
 
 // serve fonts in /assets/fonts
 import assets from "connect-assets";
-dev_server.app.use("/assets/fonts", express.static("node_modules/bootstrap/dist/fonts"));
-dev_server.app.use("/assets/fonts", express.static("node_modules/font-awesome/fonts"));
+app.use("/assets/fonts", express.static("node_modules/bootstrap/dist/fonts"));
+app.use("/assets/fonts", express.static("node_modules/font-awesome/fonts"));
 // serve compiled vendor assets and application.css.
-dev_server.app.use(assets({
-  paths: ["assets/js", "assets/css", "node_modules"],
+app.use(assets({
+  paths: ["./assets/js", "./assets/css", "./../node_modules"],
   build: true,
   buildDir: false,
   //compile: false,
@@ -85,14 +55,13 @@ dev_server.app.use(assets({
 dev_server.app.use('/', express.static(path.resolve(__dirname, 'public')));
 
 // view engine set up
-dev_server.app.set('views', path.join(__dirname, 'views'));
-dev_server.app.set('view engine', 'jade');
-dev_server.app.get("/", (req, res, next)=>{
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+app.get("/", (req, res, next)=>{
   res.render("index");
 });
 
-console.log("launching dev server")
-dev_server.listen(APP_PORT, () => {
+app.listen(APP_PORT, () => {
   console.log(`App is now running on http://localhost:${APP_PORT}`);
 });
 
@@ -101,13 +70,12 @@ dev_server.listen(APP_PORT, () => {
  */
 
 // catch 404 and forward to error handler
-dev_server.use(function(req, res, next) {
+app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
   next(err);
 });
 
-/*
 // development error handler
 // will print stacktrace
 if (app.get('env') === 'development') {
@@ -128,7 +96,57 @@ app.use(function(err, req, res, next) {
     message: err.message,
     error: {}
   });
-});*/
+});
+
+});
+
+/*
+ * Development Server
+ */
+
+import ExtractTextPlugin from "extract-text-webpack-plugin";
+
+var compiler = webpack({
+  entry: {
+    app: __dirname + '/../client/app.js',
+    style: __dirname + '/../client/style.scss'
+  },
+  output: {
+    filename: '[name].js',
+    path: __dirname + '/../client/build'
+  },
+  externals: {
+    jquery: "$",
+    d3: "d3"
+  },
+  module: {
+      loaders: [
+          {
+              test: /\.scss$/,
+              loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
+          }, {
+              test: /\.css$/,
+              loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+          }
+      ]
+  },
+  // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
+  plugins: [
+      new ExtractTextPlugin("style.css", {
+        allChunks: true
+      })
+  ]
+});
 
 
-module.exports = dev_server;
+var dev_server = new WebpackDevServer(compiler, {
+  contentBase: __dirname + '/../client/build',
+  publicPath: "/assets/",
+  proxy: {
+    '/data': `http://localhost:${APP_PORT}`
+  },
+  stats: {colors: true}
+});
+
+
+module.exports = app;

server/assets/css/vendor.scss.css

@@ -1,3 +0,0 @@
-/*=require bootstrap/dist/css/bootstrap.min
- *= require font-awesome/css/font-awesome.min
- */

server/assets/js/vendor.js

@@ -1,3 +0,0 @@
-//= require d3/d3.min
-//= require jquery/dist/jquery.min
-//= require bootstrap/dist/js/bootstrap.min

server/config/database.js

@@ -24,7 +24,6 @@ class Database {
 
     // add associations
     for (var model of Database.models){
-      console.log(`setting ${model.name}`);
       model.set();
     }
 

server/config/graphql/node.js

@@ -1,19 +0,0 @@
-import {
-  fromGlobalId,
-  nodeDefinitions,
-} from 'graphql-relay';
-
-import DB from './../database'
-
-var {nodeInterface, nodeField} = nodeDefinitions(
-  (globalId) => {
-    var {graphql_type_name, id} = fromGlobalId(globalId),
-      model = DB[graphql_type_name];
-    return model.findOne({where: {id: id}});
-  },
-  (instance) => {
-    return instance.Model().graphql_type;
-  }
-);
-
-export {nodeInterface, nodeField};

server/config/graphql/schema.graphql

@@ -1,27 +0,0 @@
-type House implements Node {
-  id: ID!
-  name: String!
-  power_data(after: String, first: Int, before: String, last: Int): [PowerDatum]
-  habitants(after: String, first: Int, before: String, last: Int): [User]
-}
-
-interface Node {
-  id: ID!
-}
-
-type PowerDatum implements Node {
-  id: ID!
-  power: Float
-  time: Int
-}
-
-type Query {
-  node(id: ID!): Node
-  viewer: User
-}
-
-type User implements Node {
-  id: ID!
-  username: String!
-  house: House
-}

server/config/graphql/schema.js

@@ -1,27 +0,0 @@
-import {
-  GraphQLObjectType,
-  GraphQLSchema
-} from 'graphql';
-
-import {nodeField} from './node';
-import DB from './../database';
-
-export default function(){
-
-  var queryType = new GraphQLObjectType({
-    name: 'Query',
-    fields: () => ({
-      node: nodeField,
-      viewer: {
-        type: DB.User.graphql_type,
-        resolve: (_, args) => {
-          return DB.User.findOne({where: {username: 'bethany'}});
-        }
-      },
-    }),
-  });
-
-  return new GraphQLSchema({
-    query: queryType
-  });
-}

server/config/react_templates.js

@@ -0,0 +1,5 @@
+export default {
+  modules: 'es6',
+  'target-version': '0.14.3',
+  'suffix': '.rt'
+};

server/config/webpack/design.js

@@ -0,0 +1 @@
+design.js

server/config/webpack/development.js

@@ -0,0 +1,41 @@
+const ROOT = __dirname + '/../../../';
+
+module.exports = {
+  entry: {
+    app: ROOT + 'client/app',
+    style: ROOT + 'client/style'
+  },
+  output: {
+    filename: '[name].js',
+    path: ROOT + 'client/build/development'
+  },
+  externals: {
+    jquery: "$",
+    d3: "d3"
+  },
+  module: {
+      loaders: [
+          {
+              test: /\.scss$/,
+              loader: ['style', 'raw', 'sass']
+          }, {
+              test: /\.css$/,
+              loader: ['style', 'raw']
+          }
+      ]
+  },
+  sassLoader: {
+    includePaths: [ROOT + 'client', ROOT + 'node_modules']
+  },
+  // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
+  plugins: [
+      new ExtractTextPlugin("style.css", {
+        allChunks: true
+      }),
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      })
+  ]
+}

server/config/webpack/production.js

@@ -0,0 +1,55 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import webpack from 'webpack';
+
+const ROOT = __dirname + '/../../../';
+
+module.exports = {
+  entry: {
+    app: ROOT + 'client/app',
+    style: ROOT + 'client/style'
+  },
+  devtool: 'source-map',
+  output: {
+    filename: '[name].min.js',
+    path: ROOT + 'client/build/production'
+  },
+  externals: {
+    jquery: "$",
+    d3: "d3"
+  },
+  module: {
+    loaders: [
+        {
+          test: /\.scss$/,
+          loader: ExtractTextPlugin.extract("style-loader", "raw-loader!sass-loader")
+        }, {
+          test: /\.css$/,
+          loader: ExtractTextPlugin.extract("style-loader", "raw-loader")
+        }, {
+          test: /\.js$/,
+          loader: 'babel'
+        }, {
+          test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: "url-loader?limit=10000&minetype=application/font-woff"
+        }, {
+          test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: "file-loader"
+        }
+    ]
+  },
+  sassLoader: {
+    includePaths: [ROOT + 'client', ROOT + 'node_modules']
+  },
+  // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
+  plugins: [
+      new ExtractTextPlugin("style.min.css", {
+        allChunks: true
+      }),
+      new webpack.optimize.UglifyJsPlugin({minimize: true}),
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      })
+  ]
+};

server/lib/tasks/react_template_compile.js

@@ -0,0 +1,58 @@
+'use strict';
+// through2 is a thin wrapper around node transform streams
+import through from 'through2';
+import gutil from 'gulp-util';
+import rt from 'react-templates';
+import path from 'path';
+import extend from 'extend';
+
+// Consts
+const PLUGIN_NAME = 'gulp-react-templates';
+var PluginError = gutil.PluginError;
+
+function normalizeName(name) {
+    return name.replace(/-/g, '_');
+}
+
+export default function (opt) {
+    function replaceExtension(filePath) {
+        return filePath + '.js';
+    }
+
+    function transform(file, enc, cb) {
+        if (file.isNull()) {
+            return cb(null, file);
+        }
+        if (file.isStream()) {
+            return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
+        }
+
+        var filePath = file.path,
+          str = file.contents.toString('utf8'),
+          data;
+
+        var options = extend({
+            filename: file.path,
+            sourceFiles: [file.relative],
+            generatedFile: replaceExtension(file.relative),
+            suffix: '.rt'
+        }, opt);
+
+        if (options.suffix && !options.name) {
+            options.name = normalizeName(path.basename(filePath, path.extname(filePath))) + options.suffix;
+        }
+
+        try {
+            data = rt.convertTemplateToReact(str, options);
+        } catch (err) {
+            return cb(new PluginError(PLUGIN_NAME, err));
+        }
+
+        file.contents = new Buffer(data);
+
+        file.path = replaceExtension(file.path);
+        cb(null, file);
+    }
+
+    return through.obj(transform);
+};