From 43ba9384a7ff7acd82e5a5ffc4c82a2fec367f22 Mon Sep 17 00:00:00 2001 From: Bilal Quadri Date: Sun, 25 Jan 2015 17:14:08 -0800 Subject: [PATCH] Use browserify for client side JS This update includes support for sourcemaps. If we ever want to have watchlike behavior, we could introduce watchify. --- .gitignore | 1 + client/{js => }/.jshintrc | 8 +++----- client/app.js | 6 ++++++ client/{js/rhyme.js => form.js} | 12 ++++++------ package.json | 14 ++++++++++---- {client => public}/css/style.css | 0 {client => public}/img/bg.png | Bin {client => public}/img/loading.gif | Bin {client => public}/img/logo.png | Bin {client => public}/index.html | 3 +-- app.js => server/app.js | 11 +++++------ server/twitter.js | 1 + 12 files changed, 33 insertions(+), 23 deletions(-) rename client/{js => }/.jshintrc (77%) create mode 100644 client/app.js rename client/{js/rhyme.js => form.js} (77%) rename {client => public}/css/style.css (100%) rename {client => public}/img/bg.png (100%) rename {client => public}/img/loading.gif (100%) rename {client => public}/img/logo.png (100%) rename {client => public}/index.html (88%) rename app.js => server/app.js (79%) diff --git a/.gitignore b/.gitignore index f776a7b..f8198f8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ secrets *.swp *.swo .env +dist diff --git a/client/js/.jshintrc b/client/.jshintrc similarity index 77% rename from client/js/.jshintrc rename to client/.jshintrc index 7ad7df8..b674a77 100644 --- a/client/js/.jshintrc +++ b/client/.jshintrc @@ -6,7 +6,7 @@ "latedef": true, "trailing": true, "undef": true, - "strict": true, + "globalstrict": true, // Relaxing options "eqnull": true, @@ -14,8 +14,6 @@ "lastsemic": true, // Environment options - "node": false, - "browser": true, - "jquery": true + "node": true, + "browser": true } - diff --git a/client/app.js b/client/app.js new file mode 100644 index 0000000..b4083c6 --- /dev/null +++ b/client/app.js @@ -0,0 +1,6 @@ +'use strict'; + +var $ = require('jquery') + , handleFormSubmission = require('./form'); + +$(document).ready(handleFormSubmission); diff --git a/client/js/rhyme.js b/client/form.js similarity index 77% rename from client/js/rhyme.js rename to client/form.js index b4477a4..dc32e87 100644 --- a/client/js/rhyme.js +++ b/client/form.js @@ -1,7 +1,10 @@ -(function() { - "use strict"; +'use strict'; +var $ = require('jquery'); + +module.exports = function() { $('#rhyme-form').on('submit', function(e) { + e.preventDefault(); var rhymeLine = $('#rhyme-line').val(); $.post('/rhyme', {line: rhymeLine}, function(res) { var poem = [{'text': rhymeLine}].concat(res); @@ -9,8 +12,5 @@ $('#tweets').append('
  • ' + poem[i].text + '
    • '); } }); - - return false; }); - -}).call(this); +}; diff --git a/package.json b/package.json index ebc04b1..59da633 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,20 @@ "version": "2.0.0", "private": true, "scripts": { - "start": "node app.js" + "start": "npm run assets && npm run browserify && node server/app.js", + "assets": "mkdir -p dist && cp -r ./public/* dist/", + "browserify": "mkdir -p ./dist/js && ./node_modules/.bin/browserify -g uglifyify ./client/app.js --debug | ./node_modules/.bin/exorcist ./dist/js/bundle.js.map > ./dist/js/bundle.js" }, "dependencies": { + "bluebird": "^1.1.0", + "browserify": "^8.1.1", + "dotenv": "^0.2.5", + "exorcist": "^0.1.6", "express": "^3.4.8", + "jquery": "^2.1.3", + "mongodb": "^1.3.23", "request": "^2.34.0", "twitter": "^0.2.9", - "mongodb": "^1.3.23", - "bluebird": "^1.1.0", - "dotenv": "^0.2.5" + "uglifyify": "^3.0.1" } } diff --git a/client/css/style.css b/public/css/style.css similarity index 100% rename from client/css/style.css rename to public/css/style.css diff --git a/client/img/bg.png b/public/img/bg.png similarity index 100% rename from client/img/bg.png rename to public/img/bg.png diff --git a/client/img/loading.gif b/public/img/loading.gif similarity index 100% rename from client/img/loading.gif rename to public/img/loading.gif diff --git a/client/img/logo.png b/public/img/logo.png similarity index 100% rename from client/img/logo.png rename to public/img/logo.png diff --git a/client/index.html b/public/index.html similarity index 88% rename from client/index.html rename to public/index.html index 26b2a38..037de25 100644 --- a/client/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ +
    @@ -30,7 +31,5 @@

    Automated poetry for tweets

    Give me a line, and I'll rhyme it for you.

    - - diff --git a/app.js b/server/app.js similarity index 79% rename from app.js rename to server/app.js index b66280e..d3d3f1b 100644 --- a/app.js +++ b/server/app.js @@ -7,18 +7,17 @@ require('dotenv').load(); * Module dependencies */ var express = require('express') - , storage = require('./server/storage') - , dictionary = require('./server/dictionary') - , rhymes = require('./server/rhymes') - , twitter = require('./server/twitter') + , storage = require('./storage') + , dictionary = require('./dictionary') + , rhymes = require('./rhymes') + , twitter = require('./twitter') , app = express(); /** * Configure app */ -app.set('views', __dirname + '/views'); app.use(express.favicon()); -app.use(express.static(__dirname + '/client')); +app.use(express.static(__dirname + '/../dist')); app.use(express.bodyParser()); /** diff --git a/server/twitter.js b/server/twitter.js index 1229462..1cba604 100644 --- a/server/twitter.js +++ b/server/twitter.js @@ -16,6 +16,7 @@ var twitter = new Twitter({ /** * Create a prototype for Tweets + * @constructor */ function Tweet(id, text, user, avatar) { this.id = id;