Package updates, security fixes, and performance optimizations (#137)

* Upgrading marked for security fix

* upgrading outdated packages

* configuring new minimizer for JS

* adding package-lock.json

* fixing linting errors

* Removing unused webpack packages

* fixing unit test when redis isn't available

* Updating yarn.lock

* Revert "adding package-lock.json"

This reverts commit 50313a0.

* Modifying imports to reduce bundle sizes

* Changing webpack build settings for prod and dev

* Adding precommit checks to the project

.gitignore

@@ -5,4 +5,5 @@ node_modules
 tmp
 npm-debug.log
 public/app.js
+public/app.js.*
 .env

client/App.jsx

@@ -12,7 +12,7 @@ import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
-import { withStyles } from '@material-ui/core/styles'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 import Header from './components/Header'
 import Modal from './components/Modal'
@@ -134,7 +134,7 @@ class App extends React.Component {
   refreshButton () {
     return (
       <Grid item xs={12} sm={12}>
-        <Button variant='raised' className={this.classes.button} onClick={this.refreshPackages}>
+        <Button variant='contained' className={this.classes.button} onClick={this.refreshPackages}>
           Refresh Packages
         </Button>
       </Grid>

client/components/Header.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
+import withStyles from '@material-ui/core/styles/withStyles'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'

client/components/Modal.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
+import md from 'marked'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
+import withStyles from '@material-ui/core/styles/withStyles'
 import Dialog from '@material-ui/core/Dialog'
 import Slide from '@material-ui/core/Slide'
 import Button from '@material-ui/core/Button'
@@ -9,7 +10,6 @@ import Toolbar from '@material-ui/core/Toolbar'
 import IconButton from '@material-ui/core/IconButton'
 import Typography from '@material-ui/core/Typography'
 import CloseIcon from '@material-ui/icons/Close'
-import md from 'marked'
 
 const styles = {
   appBar: {
@@ -40,7 +40,7 @@ class Modal extends React.Component {
   }
 
   render () {
-    let readme = md.parse(this.props.readme || '', {sanitize: true})
+    let readme = md.parse(this.props.readme || '', { sanitize: true })
     return (
       <Dialog
         fullScreen
@@ -61,7 +61,7 @@ class Modal extends React.Component {
             </Button>
           </Toolbar>
         </AppBar>
-        <Typography type='body1' component='div' dangerouslySetInnerHTML={{__html: readme}} className={this.classes.readme} />
+        <Typography type='body1' component='div' dangerouslySetInnerHTML={{ __html: readme }} className={this.classes.readme} />
       </Dialog>
     )
   }

config/webpack.config.js

@@ -25,7 +25,10 @@ const baseConfig = {
       use: {
         loader: 'babel-loader',
         options: {
-          presets: ['react']
+          presets: [
+            'react',
+            ['env', { 'modules': false }]
+          ]
         }
       }
     }, {
@@ -53,10 +56,10 @@ const baseConfig = {
 
 module.exports = () => {
   if (process.env.NODE_ENV === 'production') {
-    console.log('Loading production config...')
+    console.log('Building production config...')
     return merge(baseConfig, prodConfig)
   }
 
-  console.log('Loading development config...')
+  console.log('Building development config...')
   return merge(baseConfig, devConfig)
 }

config/webpack.dev.js

@@ -6,7 +6,6 @@ module.exports = {
     historyApiFallback: true,
     contentBase: path.join(__dirname, '../public/'),
     hot: true,
-    stats: 'errors-only',
     host: 'localhost',
     port: '8080',
     compress: true,

config/webpack.prod.js

@@ -1,14 +1,22 @@
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 const webpack = require('webpack')
 
 module.exports = {
   mode: 'production',
+  stats: 'minimal',
+  optimization: {
+    minimizer: [new TerserPlugin({
+      extractComments: true
+    })]
+  },
+  performance: {
+    hints: false
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production')
       }
-    }),
-    new UglifyJSPlugin()
+    })
   ]
 }

package.json

@@ -18,67 +18,71 @@
   "bin": "bin/npm-register",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config",
+    "build:dev": "cross-env NODE_ENV=development webpack --config ./config/webpack.config",
     "dev": "cross-env NODE_ENV=development concurrently --kill-others -p \"[{name}]\" -n \"API,UI\" -c \"white.bgMagenta.bold,white.bgGreen.bold\" \"npm run server:dev\" \"webpack-dev-server --watch-poll --colors --config ./config/webpack.config\"",
+    "lint": "standard --verbose | snazzy",
+    "precommit": "echo 'Running Linters...' && npm run lint",
     "server": "node bin/npm-register start",
     "server:dev": "nodemon --watch lib bin/npm-register start",
     "start": "cross-env NODE_ENV=production concurrently --kill-others-on-fail -p \"[{name}]\" -n \"UI,API\" -c \"white.bgMagenta.bold,white.bgGreen.bold\" \"npm run build\" \"npm run server\"",
-    "test": "nyc mocha && standard"
+    "test": "nyc mocha && standard",
+    "test:mocha": "nyc mocha"
   },
   "dependencies": {
-    "@material-ui/core": "^3.0.1",
+    "@material-ui/core": "^3.2.2",
     "@material-ui/icons": "^3.0.1",
-    "aws-sdk": "^2.227.1",
-    "axios": "^0.16.2",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "aws-sdk": "^2.339.0",
+    "axios": "^0.18.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "bluebird": "^3.5.1",
-    "body-parser": "^1.18.2",
-    "compression": "^1.7.2",
-    "concurrently": "^3.5.0",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "debug": "^3.1.0",
+    "bluebird": "^3.5.2",
+    "body-parser": "^1.18.3",
+    "compression": "^1.7.3",
+    "concurrently": "^3.6.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "debug": "^3.2.6",
     "dotenv": "^4.0.0",
-    "express": "^4.16.3",
+    "express": "^4.16.4",
     "fs-extra": "^5.0.0",
     "htpasswd-auth": "^2.0.1",
-    "http-call": "^5.1.1",
+    "http-call": "^5.2.2",
     "ioredis": "^3.2.2",
     "klaw": "^2.1.1",
-    "lodash": "^4.17.5",
-    "marked": "^0.3.6",
+    "lodash": "^4.17.11",
+    "marked": "^0.5.1",
     "metric-log": "^1.0.1",
     "node-pre-gyp": "^0.10.3",
     "on-finished": "^2.3.0",
     "opbeat": "^4.17.0",
     "path-join-safe": "1.0.0",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "s3": "^4.4.0",
     "sinon": "^4.5.0",
     "standard-loader": "^6.0.1",
-    "style-loader": "^0.18.2",
-    "uglify-es": "^3.1.2",
-    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
-    "url-loader": "^0.5.9",
-    "uuid": "^3.2.1",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.1.0",
+    "url-loader": "^1.1.2",
+    "uuid": "^3.3.2",
     "webpack": "4.17.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-merge": "^4.1.0",
-    "yargs": "^11.0.0"
+    "webpack-cli": "^3.1.2",
+    "webpack-merge": "^4.1.4",
+    "yargs": "^11.1.0"
   },
   "devDependencies": {
-    "chai": "^4.1.2",
-    "mocha": "^5.1.1",
-    "nodemon": "^1.12.1",
-    "nyc": "^11.7.1",
-    "snazzy": "^7.0.0",
+    "chai": "^4.2.0",
+    "husky": "^1.1.2",
+    "mocha": "^5.2.0",
+    "nodemon": "^1.18.4",
+    "nyc": "^11.9.0",
+    "snazzy": "^7.1.1",
     "standard": "^11.0.1",
-    "supertest": "^3.0.0",
+    "supertest": "^3.3.0",
     "tmp": "^0.0.33",
-    "unexpected": "^10.37.5",
+    "unexpected": "^10.39.1",
     "webpack-dev-server": "3.1.7"
   },
   "engines": {

test/packages.js

@@ -42,7 +42,7 @@ storageBackends.forEach(storage => {
     }))
     afterEach(() => {
       http.request.restore()
-      redis.zget.restore()
+      if (redis) redis.zget.restore()
     })
 
     describe('packages', () => {