React

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.log

README.md

@@ -2,3 +2,30 @@ README
 ======
 
 Frontend for Watchdog (previously NewsdiffHK) project.
+
+Install
+-------
+
+The server depends on packages. The serving scripts needs to build into bundle before running. Run these commands.
+
+```bash
+npm install
+npm run build
+```
+
+Run
+---
+
+To start the server:
+
+```bash
+npm run start
+```
+
+The server will prompt you to enter the API_BASE_URL. To suppress the prompt, you may also add API_BASE_URL to the environment like this:
+
+```bash
+API_BASE_URL=http://api.server.com:3000/api npm run start
+```
+
+Replace `http://api.server.com:3000` with the appropriate host and port number.

gulpfile.js

@@ -0,0 +1,153 @@
+
+// basic
+var gulp = require("gulp");
+var browserSync = require("browser-sync");
+var webpack = require("webpack");
+var express = require("express");
+var url = require("url");
+var fs = require("fs");
+
+// gulp plugins
+var gutil = require("gulp-util");
+var watch = require("gulp-watch");
+var sass = require("gulp-sass");
+var copy = require("gulp-copy");
+
+
+// convert styles
+gulp.task("build.styles", function(callback) {
+
+  // monitor css source
+  var files = [
+    "./src/styles/*.sass",
+    "./src/styles/*.scss"
+  ];
+  var sassCfg = {
+    errLogToConsole: true
+  };
+  gulp.src(files)
+    .pipe(sass(sassCfg))
+    .pipe(gulp.dest("./public/styles/"));
+
+  // monitor plain css
+  gulp.src("./src/styles/*.css")
+    .pipe(copy("./public/styles/", { prefix: 2 }));
+
+  gutil.log("[styles]", "styles generated");
+  callback();
+});
+
+// bundle scripts
+gulp.task("build.webpack", function(callback) {
+  var webpackCfg = require("./webpack.config");
+
+  // run webpack
+  webpack(webpackCfg, function(err, stats) {
+    if(err) throw new gutil.PluginError("webpack", err);
+    gutil.log("[webpack]", stats.toString({
+      // output options
+    }));
+    callback();
+  });
+});
+
+
+// generate environment to js
+gulp.task("dev.env", function(callback) {
+  var fs = require("fs");
+  var proxy_port = process.env["PROXY_PORT"] || 8000;
+  var js = "var env = " + JSON.stringify({
+    "api_base_url": "http://localhost:"+proxy_port+"/api/"
+  }) + ";";
+  fs.writeFile("./public/scripts/env.js", js, function(err) {
+    if (err) {
+      callback(err);
+      process.exit(1);
+      return
+    }
+    gutil.log("[dev.env]", "env.js created");
+  });
+});
+
+// watch the source files
+// generates public files
+gulp.task("dev.watch", function(callback) {
+  watch([
+    "./src/styles/**/*.sass",
+    "./src/styles/**/*.scss",
+    "./src/styles/**/*.css"
+  ], function () {
+    gulp.run("build.styles");
+  });
+  watch("./src/app/**/*.*", function () {
+    gulp.run("build.webpack");
+  });
+});
+
+
+// watch the public files
+// hot reload if there is changes
+gulp.task("dev.server", function(callback) {
+
+  var files = [
+    "public/**/*.html",
+    "public/styles/**/*.css",
+    "public/scripts/**/*.js"
+  ];
+  var baseDir = "./public";
+
+  browserSync.init(files, {
+    server: {
+      baseDir: baseDir
+    },
+    middleware: function(req, res, next) {
+        var fileName = url.parse(req.url);
+        fileName = fileName.href.split(fileName.search).join("");
+        var fileExists = fs.existsSync(baseDir + "/" + fileName);
+        if (!fileExists && fileName.indexOf("browser-sync-client") < 0) {
+            req.url = "/index.html";
+        }
+        return next();
+    },
+    port: process.env["PORT"] || 8080
+  });
+
+});
+
+// api proxy for development
+gulp.task("dev.api", function(callback) {
+
+  if (typeof process.env["API_BASE_URL"] == "undefined") {
+    callback("Environment variable API_BASE_URL is not defined");
+    process.exit(1);
+  }
+
+  var bodyParser = require("body-parser");
+  var app = express();
+  var forward = require("./includes/forward.js");
+
+  app.set("port", (process.env["PROXY_PORT"] || 8000));
+  app.use(bodyParser.json());
+  app.use(bodyParser.urlencoded({extended: true}));
+  app.use(forward(/^\/api\/(.+?)$/, process.env["API_BASE_URL"], gutil.log.bind("[dev.api]")));
+  app.listen(app.get("port"), function() {
+    gutil.log("[dev.api]", "proxy server started at http://localhost:" + app.get("port") + "/");
+    gutil.log("[dev.api]", "proxy to " + process.env["API_BASE_URL"]);
+  });
+
+});
+
+// build the source files
+gulp.task("build", ["build.styles", "build.webpack"]);
+
+// run development server
+gulp.task("dev", [
+  "build",
+  "dev.env",
+  "dev.api",
+  "dev.watch",
+  "dev.server"
+]);
+
+// define default task(s)
+gulp.task("default", ["dev"]);

includes/envars.js

@@ -0,0 +1,33 @@
+
+
+// add trailing slash
+function trailSlash(str) {
+  if (str.substr(-1) != '/') {
+    str += '/';
+  }
+  return str
+}
+
+// wait for environment to be ready
+exports.ready = function (callback) {
+  if (typeof process.env["API_BASE_URL"] == "undefined") {
+  	// if API_BASE_URL is not defined, prompt user to define
+    (function (process, callback) {
+      var prompt = require('prompt');
+      prompt.start();	
+    	console.log('Missing environment variable');
+      prompt.get(['API_BASE_URL'], function (err, result) {
+        if (err) { return onErr(err); }
+        var url = trailSlash(result.API_BASE_URL);
+        console.log('API_BASE_URL:   ' + url);
+        process.env["API_BASE_URL"] = url;
+        callback();
+      });
+    })(process, callback)
+  } else {
+    process.env["API_BASE_URL"] =
+      trailSlash(process.env["API_BASE_URL"]);
+    console.log('API_BASE_URL:   ' + process.env["API_BASE_URL"]);
+    callback();
+  }
+}

includes/forward.js

@@ -0,0 +1,25 @@
+
+var request = require('request')
+
+// add trailing slash
+function trailSlash(str) {
+  if (str.substr(-1) != '/') {
+    str += '/';
+  }
+  return str
+}
+
+module.exports = function(pattern, host, log){
+  host = trailSlash(host);
+  return function(req, res, next){
+    if(req.url.match(pattern)){
+      log("Accessing proxy api on "+req.url);
+      var db_path = req.url.match(pattern)[1]
+        , db_url = [host, db_path].join('');
+      res.header('Access-Control-Allow-Origin', '*');
+      req.pipe(request[req.method.toLowerCase()](db_url)).pipe(res);
+    }else{
+      next();
+    }
+  }
+}

package.json

@@ -0,0 +1,40 @@
+{
+	"name": "newsdiff-frontend",
+	"version": "0.0.1",
+	"description": "",
+	"scripts": {
+		"build": "gulp build",
+		"dev":   "gulp",
+		"start": "node server.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/code4hk/Newsdiff-Frontend.git"
+	},
+	"author": "Code4HK",
+	"license": "GPLv3",
+	"browserify": {
+		"transform": ["aliasify"]
+	},
+	"dependencies": {
+		"express": "^4.13.0",
+		"body-parser": "^1.13.0",
+		"prompt": "^0.2.14",
+		"browser-request": "^0.3.3",
+		"react": "^0.13.3",
+		"react-router": "^0.13.3",
+		"request": "^2.65.0",
+		"alt": "^0.16.10"
+	},
+	"devDependencies": {
+		"browser-sync": "~2.7.13",
+		"gulp": "~3.9.0",
+		"gulp-util": "~3.0.6",
+		"gulp-watch": "~4.2.4",
+		"gulp-sass": "~2.0.3",
+		"gulp-copy": "~0.0.2",
+		"webpack": "^1.10.1",
+		"jsx-loader": "^0.13.2",
+		"babel-loader": "^5.2.2"
+	}
+}

public/.gitignore

@@ -0,0 +1,2 @@
+styles
+scripts

public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Newsdiff HK</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+     <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue_grey-blue.min.css" />
+    <link rel="stylesheet" href="/styles/theme.css" />
+    <link rel="stylesheet" href="/styles/styles.css" />
+</head>
+<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
+    <span class="msg-loading">Loading...</span>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
+    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
+    <script src="/scripts/env.js"></script>
+    <script src="/scripts/bundle.js"></script>
+</body>
+</html>