Put JS through build pipeline

client/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "stage-0"
+  ]
+}

client/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  browser: true

package.json

@@ -32,9 +32,10 @@
     "exhibit": "^0.10.1",
     "exhibit-directory": "^0.10.1",
     "exhibit-plugin-autoprefixer": "^0.10.1",
+    "exhibit-plugin-babel": "^0.10.1",
+    "exhibit-plugin-browserify": "^0.10.1",
     "exhibit-plugin-sass": "^0.10.1",
     "express": "^4.14.0",
-    "express-babelify-middleware": "^0.2.1",
     "g-ui": "git+https://github.com/Financial-Times/g-ui.git#adds-templates",
     "html-minifier": "^3.0.3",
     "isomorphic-fetch": "^2.2.1",
@@ -55,9 +56,9 @@
     "sequelize": "^3.24.3",
     "sequelize-cli": "^2.4.0",
     "svg-intersections": "^0.2.5",
+    "trip": "^1.0.3",
     "winston": "^2.2.0",
-    "xmldom": "^0.1.22",
-    "trip": "^1.0.3"
+    "xmldom": "^0.1.22"
   },
   "devDependencies": {
     "babel-eslint": "^6.1.2",
@@ -76,10 +77,10 @@
   },
   "private": true,
   "scripts": {
-    "start": "sequelize db:migrate && node --require ./setup.js server",
-    "scraper": "node --require ./setup.js scraper/run",
-    "postinstall": "bower install && trip build",
     "dev": "trip watch & nodemon --ext js,html,svg,css --ignore dist --ignore public",
+    "postinstall": "bower install && trip build",
+    "scraper": "node --require ./setup.js scraper/run",
+    "start": "sequelize db:migrate && node --require ./setup.js server",
     "test": "mocha --compilers js:babel-core/register layouts/*.spec.js"
   }
 }

server/index.js

@@ -1,6 +1,5 @@
 import express from 'express';
 import lru from 'lru-cache';
-import babelify from 'express-babelify-middleware';
 import slashes from 'connect-slashes';
 import flags from '../config/flags';
 import * as nunjucks from './nunjucks';
@@ -52,7 +51,6 @@ if (process.env.SCRAPE_ON_STARTUP === '1' || process.env.SCRAPE_ON_STARTUP === '
   });
 }
 
-app.use('/main.js', babelify('public/main.js'));
 app.use(express.static('dist'));
 app.use(express.static('public'));
 app.use(slashes(false));
@@ -100,7 +98,7 @@ app.get('/__access_metadata', (req, res) => {
   res.setHeader('Content-Type', 'application/json');
   res.setHeader('Cache-Control', `public, max-age=86400`);
   res.send(`
-    {"access_metadata":[{"path_regex":"\/us-elections*","classification":"unconditional"},
+    {"access_metadata":[{"path_regex":"/us-elections*","classification":"unconditional"},
     {"path_regex":".*","classification":"unconditional"}]}`);
 });
 
@@ -202,7 +200,9 @@ if (app.locals.flags.results) {
 app.get('/:code', stateCodeRedirectController);
 
 const server = app.listen(process.env.PORT || 5000, () => {
-  const host = server.address().address;
-  const port = server.address().port;
-  console.log(`running ${host} ${port}`);
+  const { port } = server.address();
+
+  console.log(
+    app.locals.flags.prod ? `Running on port ${port}` : `Running at http://localhost:${port}/`
+  );
 });

tripfile.js

@@ -7,6 +7,8 @@ const dist = new Directory('dist', { log: true });
 const transform = compose(
   plugin('sass', { root: 'client', loadPaths: ['bower_components'] }),
   plugin('autoprefixer', 'last 2 versions'),
+  plugin('babel', { root: 'client' }),
+  plugin('browserify', { root: 'client' }),
 );
 
 export const build = async () => {

views/polls-layout.html

@@ -10,7 +10,7 @@
   ]
 %}
 {% set scripts = [
-  'main.js',
+  'main.entry.js',
   'g-ui/index.js',
   'https://origami-build.ft.com/v2/bundles/js?export=bundle&modules=o-expander@^4.0.2,o-buttons@^4.0.2,o-date@^2.6.0,o-cookie-message@^2.2.0'
   ]