Build with Webpack; Remove Gulp & Browserify

.babelrc

@@ -1,3 +1,14 @@
 {
-  "presets": ["es2015", "es2016", "react"]
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": [
+          "last 2 versions",
+          "not Explorer < 11",
+          "not ExplorerMobile > 0"
+        ]
+      }
+    }],
+    "react"
+  ]
 }

README.md

@@ -6,11 +6,12 @@ This component works with [web-monitoring-db](https://github.com/edgi-govdata-ar
 
 It’s a React.js-based browser application with a Node.js backend with the following capabilities:
 * Consume subset of data from web-monitoring-db as proof of concept, read/write annotations
-    * [DEMO](https://edgi-web-monitor-ui.herokuapp.com)
-    * LIST VIEW shows first page of records from [web-monitor-db](https://web-monitoring-db.herokuapp.com/api/v0/pages) JSON endpoint
+    * [DEMO](https://monitoring-staging.envirodatagov.org)
+    * LIST VIEW shows first page of records from [web-monitor-db](https://api-staging.monitoring.envirdatagov.org/api/v0/pages) JSON endpoint
     * PAGE VIEW shows basic info about the latest version of that page: site, urls, and links to Versionista diffs
         * updates annotations
 
+
 ## Installation
 
 1. Ensure you have yarn ([installation instructions](https://yarnpkg.com/en/docs/install))
@@ -20,27 +21,18 @@ It’s a React.js-based browser application with a Node.js backend with the foll
     ```sh
     yarn install
     ```
+
+    *Note: you might need Python 2 in order to build & install `node-zopfli`, one of our dependencies. If you are also running [`web-monitoring-processing`](https://github.com/edgi-govdata-archiving/web-monitoring-processing) (which uses Python 3), tools like [Conda](https://conda.io/) or [Pyenv](https://github.com/pyenv/pyenv) can help you manage multiple versions of Python.*
 
 4. Copy `.env.example` to `.env` and supply any local configuration info you need (all fields are optional)
-5. Build the application
-
-    ```sh
-    gulp
-    ```
 
-6. Start the web server
+5. Start the web server
 
     ```sh
     yarn run start
     ```
 
-7. If you are actively developing then use gulp to rebuild application on file changes
-
-   ```sh
-   gulp watch
-   ```
-
-8. (Optional) Set up Google Sheets for user tasking, saving important changes and repeated, “dictionary” changes. If you skip this step, everything will work fine, but your UI will show all pages when logged in, not just your assigned pages. See the section below on [Google Sheets](#google-sheets-tasking-and-significant-changes).
+6. (Optional) Set up Google Sheets for user tasking, saving important changes and repeated, “dictionary” changes. If you skip this step, everything will work fine, but your UI will show all pages when logged in, not just your assigned pages. See the section below on [Google Sheets](#google-sheets-tasking-and-significant-changes).
 
 ## Running tests
 
@@ -53,7 +45,7 @@ yarn test
 while to start the test runner in watch mode
 
 ```sh
-yarn dev
+yarn run test-watch
 ```
 
 ## Manual view
@@ -147,26 +139,6 @@ Restart your app server and try clicking on the “add important change” or 
 We need your help! Please read through the [Web Monitoring Project](https://github.com/edgi-govdata-archiving/web-monitoring) project document and see what you can help with and check [EDGI’s contribution guidelines](https://github.com/edgi-govdata-archiving/overview/blob/master/CONTRIBUTING.md) for information on how to propose issues or changes.
 
 
-## Troubleshooting
-
-#### `The program 'gulp' is currently not installed`
-
-If your run into `The program 'gulp' is currently not installed` error then you can either:
-
-1. Use local development install of gulp
-
-    ```sh
-    yarn run gulp
-    # or
-    npm run gulp
-    ```
-
-2. Install gulp globally
-
-   ```sh
-   yarn install --global gulp-cli
-   ```
-
 ## Contributors
 
 This project wouldn’t exist without a lot of amazing people’s help. Thanks to the following for all their contributions!
@@ -195,6 +167,7 @@ This project wouldn’t exist without a lot of amazing people’s help. Thanks t
 
 (For a key to the contribution emoji or more info on this format, check out [“All Contributors.”](https://github.com/kentcdodds/all-contributors))
 
+
 ## License & Copyright
 
 Copyright (C) <2017> Environmental Data and Governance Initiative (EDGI)

package.json

@@ -8,34 +8,39 @@
     "ejs": "^2.5.5",
     "express": "^4.14.1",
     "googleapis": "^19.0.0",
-    "gulp-notify": "^3.0.0",
     "request": "^2.81.0"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
+    "autoprefixer": "^7.2.4",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^14.0.0",
+    "css-loader": "^0.28.8",
     "dotenv": "^4.0.0",
     "enzyme": "^2.8.2",
     "eslint": "^4.3.0",
     "eslint-plugin-react": "^7.1.0",
+    "extract-loader": "^1.0.1",
     "fetch-mock": "^5.12.1",
-    "gulp": "^3.9.1",
-    "gulp-util": "^3.0.8",
+    "file-loader": "^1.1.6",
     "jest": "^20.0.4",
+    "postcss-loader": "^2.0.10",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-aria-modal": "^2.7.0",
     "react-dom": "^15.5.4",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.5.4",
     "react-tooltip": "^3.3.0",
-    "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.9.0"
+    "uglifyjs-webpack-plugin": "^1.1.6",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^2.0.3",
+    "zopfli-webpack-plugin": "^0.1.0"
   },
   "scripts": {
+    "build": "webpack",
+    "build-production": "NODE_ENV=production webpack",
     "lint": "eslint --ignore-path .gitignore './**/*.{js,jsx}'",
     "start": "node server/app.js",
     "test": "jest",
@@ -45,6 +50,11 @@
   "author": "",
   "license": "GPL-3.0",
   "engines": {
-    "node": "8.2.1"
-  }
+    "node": "8.9.4"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "not Explorer < 11",
+    "not ExplorerMobile > 0"
+  ]
 }

scripts/heroku-deploy.sh

@@ -23,8 +23,8 @@ else
     git checkout -b ${deployTo} ${deployFrom}
 fi
 
-gulp img css browserify
-git add -f dist/bundle.js dist/css/diff.css dist/css/styles.css dist/img/*
+yarn run build-production
+git add -f dist/bundle.* dist/css/* dist/img/* dist/sourceMaps/*
 git commit -m "Deploy heroku app"
 git push -f ${remote} ${deployTo}:master
 git checkout ${currentBranch}

server/app.js

@@ -22,8 +22,38 @@ if (process.env.FORCE_SSL && process.env.FORCE_SSL.toLowerCase() === 'true') {
   });
 }
 
+// Serve assets (live from Webpack in dev mode)
+if (config.baseConfiguration().NODE_ENV === 'development') {
+  const webpack = require('webpack');
+  const webpackDevMiddleware = require('webpack-dev-middleware');
+  const webpackConfig = require('../webpack.config.js');
+
+  app.use(webpackDevMiddleware(webpack(webpackConfig), {
+    publicPath: webpackConfig.output.publicPath
+  }));
+}
+else {
+  app.use(express.static('dist', {
+    setHeaders (response, filePath, stat) {
+      if (filePath.endsWith('.gz')) {
+        response.set('Content-Encoding', 'gzip');
+
+        const preExtension = (filePath.match(/\.([^/]+)\.gz$/i) || ['', ''])[1];
+        const contentType = {
+          js: 'application/javascript',
+          css: 'text/css',
+          svg: 'image/svg+xml'
+        }[preExtension];
+
+        if (contentType) {
+          response.set('Content-Type', contentType);
+        }
+      }
+    }
+  }));
+}
+
 app.set('views', path.join(__dirname, '../views'));
-app.use(express.static('dist'));
 app.engine('html', require('ejs').renderFile);
 app.use(bodyParser.json());
 
@@ -111,8 +141,12 @@ app.post(
  * Main view for manual entry
  */
 app.get('*', function (request, response) {
+  const useGzip = config.baseConfiguration().NODE_ENV === 'production'
+    && request.acceptsEncodings('gzip');
+
   response.render('main.html', {
-    configuration: config.clientConfiguration()
+    configuration: config.clientConfiguration(),
+    useGzip
   });
 });
 

server/configuration.js

@@ -24,6 +24,8 @@ function baseConfiguration () {
   let localEnvironment = processEnvironment;
 
   if (processEnvironment.NODE_ENV !== 'production') {
+    localEnvironment.NODE_ENV = 'development';
+
     // dotenv.config() updates process.env, but only with properties it doesn't
     // already have. That means it won't update properties that were previously
     // specified, so we have to do it manually here.

src/components/loading.jsx

@@ -1,10 +1,11 @@
+import infinityLoaderPath from '../img/infinity-loader.svg';
 import React from 'react';
 
 export default class Loading extends React.Component {
   render () {
     return (
       <div className="loading">
-        <object type="image/svg+xml" data="/img/infinity-loader.svg" />
+        <object type="image/svg+xml" data={infinityLoaderPath} />
       </div>
     );
   }

src/scripts/main.jsx

@@ -1,3 +1,5 @@
+import '../css/styles.css';
+import '../css/diff.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import WebMonitoringUi from '../components/web-monitoring-ui';

views/main.html

@@ -9,7 +9,7 @@
 
         <link rel="stylesheet" type="text/css"
             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
-        <link rel="stylesheet" type="text/css" href="/css/styles.css"/>
+        <link rel="stylesheet" type="text/css" href="/css/styles.css<%- useGzip ? '.gz' : '' %>"/>
         <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
         <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script type="text/javascript">
@@ -20,6 +20,6 @@
     <body id="bootstrap-override">
         <div id="web-monitoring-ui-root"></div>
 
-        <script type="text/javascript" src="/bundle.js"></script>
+        <script type="text/javascript" src="/bundle.js<%- useGzip ? '.gz' : '' %>"></script>
     </body>
 </html>