Upgraded Webpack and other packages. Enabled Hot Module Replacement for both the UI and the reducers. Refactored build configuration /cfg/. Etc...

2017-12-29 18:30:30 -08:00 · 2017-12-29 18:30:30 -08:00 · 63a7dad429
--- a/.babelrc
+++ b/.babelrc
@ -1,7 +1,12 @@
 {
  "presets": [
-    "es2015",
-    "stage-0",
+    ["env", { "modules": false }],
    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    "syntax-class-properties",
+    "transform-class-properties",
+    "react-hot-loader/babel"
  ]
 }
--- a/README.md
+++ b/README.md
@ -1,10 +1,12 @@
+[![Build Status](https://travis-ci.org/Azure/Sia-EventUI.svg?branch=master)](https://travis-ci.org/Azure/Sia-EventUI)
+
 # This is the user interface for SRE Incident Assistant (SIA)
 See the [Root repository](https://github.com/azure/Sia-Root) for full project information.

 SIA is built using:
 + [ReactJs](https://facebook.github.io/react/)
-+ [Webpack 2](https://webpack.js.org/)
-+ [Material UI](http://www.material-ui.com/#/)
+ [Webpack](https://webpack.js.org/)
+ [Material UI](http://www.material-ui.com/)

 SIA is configured for Wepback's hot module reloading, so changes should automatically appear in your browser.

--- a/cfg/base.js
+++ b/cfg/base.js
@ -1,47 +1,98 @@
-'use strict'
-let path = require('path')
-let defaultSettings = require('./defaults')
-let webpack = require('webpack')
+const path = require('path')
+const webpack = require('webpack')

-// Additional npm or bower modules to include in builds
-// Add all foreign plugins you may need into this array
-// @example:
-// let npmBase = path.join(__dirname, '../node_modules');
-// let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];
-let additionalPaths = []
+const env = process.env.REACT_WEBPACK_ENV

-module.exports = {
-  additionalPaths: additionalPaths,
-  port: defaultSettings.port,
-  debug: true,
+let constants
+try {
+  constants = require(`./${env}.const`)
+} catch (ex) { // TODO: Catch only file not found.
+  console.log(`${env}.const not found.`, ex)
+  constants = require('./defaultConstants')
+}
+
+const srcPath = path.join(__dirname, '/../src')
+const publicPath = '/assets/'
+
+const config = {
+  entry: [
+    'babel-polyfill'
+  ],
  devtool: 'eval',
  output: {
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
-    publicPath: defaultSettings.publicPath
+    publicPath: publicPath
  },
  devServer: {
    contentBase: './src/',
    historyApiFallback: true,
    hot: true,
-    port: defaultSettings.port,
-    publicPath: defaultSettings.publicPath,
+    publicPath: publicPath,
    noInfo: false
  },
  resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js'],
    alias: {
-      actions: `${defaultSettings.srcPath}/actions/`,
-      components: `${defaultSettings.srcPath}/components/`,
-      sources: `${defaultSettings.srcPath}/sources/`,
-      stores: `${defaultSettings.srcPath}/stores/`,
-      styles: `${defaultSettings.srcPath}/styles/`,
-      config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV,
+      actions: `${srcPath}/actions/`,
+      components: `${srcPath}/components/`,
+      sources: `${srcPath}/sources/`,
+      stores: `${srcPath}/stores/`,
+      styles: `${srcPath}/styles/`,
+      config: `${srcPath}/config/${env}`,
      'react/lib/ReactMount': 'react-dom/lib/ReactMount'
    }
  },
-  module: {},
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(js|jsx)$/,
+        include: srcPath,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      {
+        test: /\.sass/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+      },
+      {
+        test: /\.scss/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+      },
+      {
+        test: /\.less/,
+        loader: 'style-loader!css-loader!less-loader'
+      },
+      {
+        test: /\.styl/,
+        loader: 'style-loader!css-loader!stylus-loader'
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2)$/,
+        loader: 'url-loader?limit=8192'
+      },
+      {
+        test: /\.(mp4|ogg|svg|eot|ttf)$/,
+        loader: 'file-loader'
+      }
+    ]
+  },
  plugins: [
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/)
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': `"${env}"`,
+      'constants': JSON.stringify(constants)
+    }),
+    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de/)
  ]
-}
+}
+
+module.exports = config
--- a/cfg/defaults.js
+++ b/cfg/defaults.js
@ -1,64 +0,0 @@
-/**
- * Function that returns default values.
- * Used because Object.assign does a shallow instead of a deep copy.
- * Using [].push will add to the base array, so a require will alter
- * the base array output.
- */
-'use strict';
-
-const path = require('path');
-const srcPath = path.join(__dirname, '/../src');
-const dfltPort = 8000;
-
-/**
- * Get the default modules object for webpack
- * @return {Object}
- */
-function getDefaultModules() {
-  return {
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        include: srcPath,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.sass/,
-        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
-      },
-      {
-        test: /\.scss/,
-        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
-      },
-      {
-        test: /\.less/,
-        loader: 'style-loader!css-loader!less-loader'
-      },
-      {
-        test: /\.styl/,
-        loader: 'style-loader!css-loader!stylus-loader'
-      },
-      {
-        test: /\.(png|jpg|gif|woff|woff2)$/,
-        loader: 'url-loader?limit=8192'
-      },
-      {
-        test: /\.(mp4|ogg|svg|eot|ttf)$/,
-        loader: 'file-loader'
-      }
-    ]
-  };
-}
-
-module.exports = {
-  srcPath: srcPath,
-  publicPath: '/assets/',
-  port: dfltPort,
-  getDefaultModules: getDefaultModules
-};
--- a/cfg/dev.js
+++ b/cfg/dev.js
@ -1,43 +1,23 @@
-'use strict'
+const path = require('path')
+const webpack = require('webpack')

-let path = require('path')
-let webpack = require('webpack')
-let baseConfig = require('./base')
-let defaultSettings = require('./defaults')
-let constants = require('./dev.const')
+const baseConfig = require('./base')

-// Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin')
-
-let config = Object.assign({}, baseConfig, {
-  entry: [
-    'webpack-hot-middleware/client?http://127.0.0.1:' + defaultSettings.port,
-    './src/index'
-  ],
+const config = Object.assign({}, baseConfig, {
  cache: true,
-  devtool: 'eval-source-map',
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"dev"',
-      'constants': JSON.stringify(constants)
-    })
-  ],
-  module: defaultSettings.getDefaultModules()
+  devtool: 'eval-source-map'
 })

-// Add needed loaders to the defaults here
-config.module.loaders.push({
-  test: /\.(js|jsx)$/,
-  loader: 'react-hot!babel-loader',
-  include: [].concat(
-    config.additionalPaths,
-    [path.join(__dirname, '/../src')]
-  )
-})
+config.entry.push(...[
+  'react-hot-loader/patch',
+  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
+  path.join(__dirname, '../src/index')
+])
+
+config.plugins.push(...[
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NamedModulesPlugin(),
+  new webpack.NoEmitOnErrorsPlugin()
+])

 module.exports = config
--- a/cfg/dist.js
+++ b/cfg/dist.js
@ -1,50 +1,20 @@
-'use strict'
+const path = require('path')
+const webpack = require('webpack')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

-let path = require('path')
-let webpack = require('webpack')
+const baseConfig = require('./base')

-let baseConfig = require('./base')
-let defaultSettings = require('./defaults')
-let constants = require('./dist.const');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-
-// Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin')
-
-let config = Object.assign({}, baseConfig, {
-  entry: path.join(__dirname, '../src/index'),
+const config = Object.assign({}, baseConfig, {
  cache: false,
-  devtool: 'sourcemap',
-  plugins: [
-    new webpack.optimize.DedupePlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"',
-      'constants': JSON.stringify(constants)
-    }),
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    }),
-    new UglifyJSPlugin({
-      parallel: {
-          cache: true,
-          workers: 2
-      }
-  }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.AggressiveMergingPlugin(),
-    new webpack.NoErrorsPlugin()
-  ],
-  module: defaultSettings.getDefaultModules()
+  devtool: 'sourcemap'
 })

-// Add needed loaders to the defaults here
-config.module.loaders.push({
-  test: /\.(js|jsx)$/,
-  loader: 'babel',
-  include: [].concat(
-    config.additionalPaths,
-    [ path.join(__dirname, '/../src') ]
-  )
-})
+config.entry.push(path.join(__dirname, '../src/index'))

-module.exports = config;
+config.plugins.push(...[
+  new UglifyJSPlugin({ sourceMap: true }),
+  new webpack.optimize.AggressiveMergingPlugin(),
+  new webpack.NoEmitOnErrorsPlugin()
+])
+
+module.exports = config
--- a/cfg/localhost.js
+++ b/cfg/localhost.js
@ -1,43 +1,23 @@
-'use strict';
+const path = require('path')
+const webpack = require('webpack')

-let path = require('path');
-let webpack = require('webpack');
-let baseConfig = require('./base');
-let defaultSettings = require('./defaults');
-let constants = require('./localhost.const');
+const baseConfig = require('./base')

-// Add needed plugins here
-let BowerWebpackPlugin = require('bower-webpack-plugin');
-
-let config = Object.assign({}, baseConfig, {
-  entry: [
-    'webpack-hot-middleware/client?http://127.0.0.1:' + defaultSettings.port,
-    './src/index'
-  ],
+const config = Object.assign({}, baseConfig, {
  cache: true,
-  devtool: 'eval-source-map',
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new BowerWebpackPlugin({
-      searchResolveModulesDirectories: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"localhost"',
-      'constants': JSON.stringify(constants)
-    })
-  ],
-  module: defaultSettings.getDefaultModules()
-});
+  devtool: 'eval-source-map'
+})

-// Add needed loaders to the defaults here
-config.module.loaders.push({
-  test: /\.(js|jsx)$/,
-  loader: 'react-hot!babel-loader',
-  include: [].concat(
-    config.additionalPaths,
-    [path.join(__dirname, '/../src')]
-  )
-});
+config.entry.push(...[
+  'react-hot-loader/patch',
+  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
+  path.join(__dirname, '../src/index')
+])

-module.exports = config;
+config.plugins.push(...[
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NamedModulesPlugin(),
+  new webpack.NoEmitOnErrorsPlugin()
+])
+
+module.exports = config
--- a/cfg/test.js
+++ b/cfg/test.js
@ -1,21 +1,10 @@
-'use strict'
+const nodeExternals = require('webpack-node-externals')
+const WebpackShellPlugin = require('webpack-shell-plugin')

-var webpack = require('webpack')
-var nodeExternals = require('webpack-node-externals')
-var WebpackShellPlugin = require('webpack-shell-plugin')
-let defaultSettings = require('./defaults')
+const baseConfig = require('./base')

-let testConstants
-try {
-  testConstants = require('./test.const')
-} catch (ex) {
-  testConstants = require('./defaultConstants')
-}
-
-var testStandinFor = (variableName) => 'Test Standin For ' + variableName
-
-var config = {
-  entry: './test/loadtests.js',
+const config = Object.assign({}, baseConfig, {
+  cache: false,
  output: {
    filename: 'temp/testBundle.js'
  },
@ -23,52 +12,13 @@ var config = {
  externals: [nodeExternals()],
  node: {
    fs: 'empty'
-  },
-  module: {
-    rules: [
-          {
-            test: /\.js$/,
-            enforce: 'pre',
+  }
+})

-            loader: 'eslint-loader',
-            options: {
-              emitWarning: true,
-            },
-          },
-        ],
-      loaders: [
-        {
-          loader: 'babel-loader',
-          exclude: /node_modules/,
-          query: {
-            presets: ['es2015']
-          }
-        }
-      ]
-  },
+config.entry.push('./test/loadtests.js')

-  plugins: [
-    new WebpackShellPlugin({
-      onBuildExit: "mocha temp/testBundle.js"
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"test"',
-      'constants': JSON.stringify(testConstants)
-    })
-  ],
-
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      actions: `${defaultSettings.srcPath}/actions/`,
-      components: `${defaultSettings.srcPath}/components/`,
-      sources: `${defaultSettings.srcPath}/sources/`,
-      stores: `${defaultSettings.srcPath}/stores/`,
-      styles: `${defaultSettings.srcPath}/styles/`,
-      config: `${defaultSettings.srcPath}/config/` + (process.env.REACT_WEBPACK_ENV ? process.env.REACT_WEBPACK_ENV : 'test'),
-      'react/lib/ReactMount': 'react-dom/lib/ReactMount'
-    }
-  },
-}
+config.plugins.push(new WebpackShellPlugin({
+  onBuildExit: 'mocha --colors temp/testBundle.js'
+}))

 module.exports = config
--- a/package.json
+++ b/package.json
@ -1,5 +1,6 @@
 {
  "private": true,
+  "name": "sia-eventui",
  "version": "0.0.1",
  "description": "LiveSite Crisis Management Workflow Engine",
  "main": "",
@ -15,86 +16,89 @@
    "serve": "node server.js --env=dev",
    "serve:dist": "cross-env NODE_ENV=dist node server.js",
    "start": "node server.js --env=localhost",
-    "test": "webpack --config ./cfg/test.js",
+    "test": "webpack --env=test",
    "test:watch": "karma start --autoWatch=true --singleRun=false"
  },
-  "repository": "",
-  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Azure/Sia-EventUI.git"
+  },
+  "keywords": [
+    "SRE"
+  ],
  "author": "WAOM Team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Azure/Sia-EventUI/issues"
+  },
+  "homepage": "https://github.com/Azure/Sia-EventUI#readme",
  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-eslint": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-polyfill": "^6.3.14",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.0.15",
-    "babel-preset-stage-0": "^6.5.0",
-    "bower-webpack-plugin": "^0.1.9",
-    "browserify": "^14.4.0",
-    "chai": "^3.2.0",
-    "copyfiles": "^1.0.0",
-    "core-js": "^2.0.0",
-    "css-loader": "^0.23.0",
-    "eslint": "^3.0.0",
-    "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^6.0.0",
-    "file-loader": "^0.9.0",
-    "glob": "^7.0.0",
-    "humps": "^2.0.0",
-    "isparta-instrumenter-loader": "^1.0.0",
-    "karma": "^1.0.0",
-    "karma-babel-preprocessor": "^6.0.1",
-    "karma-browserify": "^5.1.1",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "browserify": "^14.5.0",
+    "chai": "^4.1.2",
+    "copyfiles": "^1.2.0",
+    "core-js": "^2.5.3",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.13.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-react": "^7.5.1",
+    "file-loader": "^1.1.6",
+    "karma": "^1.7.1",
+    "karma-babel-preprocessor": "^7.0.0",
+    "karma-browserify": "^5.1.2",
    "karma-chai": "^0.1.0",
-    "karma-coverage": "^1.0.0",
-    "karma-mocha": "^1.0.0",
-    "karma-mocha-reporter": "^2.0.0",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-sourcemap-loader": "^0.3.5",
-    "karma-webpack": "^1.7.0",
-    "material-ui": "^0.17.3",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.9",
+    "material-ui": "^0.20.0",
    "minimist": "^1.2.0",
-    "mocha": "^3.3.0",
-    "moment": "^2.18.1",
-    "normalizr": "^3.2.2",
-    "null-loader": "^0.1.1",
-    "open": "0.0.5",
-    "phantomjs-prebuilt": "^2.0.0",
-    "prop-types": "^15.5.8",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "react-hot-loader": "^1.2.9",
-    "react-redux": "^5.0.4",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
-    "react-tap-event-plugin": "^2.0.1",
-    "redux": "^3.6.0",
-    "rimraf": "^2.4.3",
-    "style-loader": "^0.13.0",
-    "url-loader": "^0.5.6",
-    "watchify": "^3.9.0",
-    "webpack": "^1.12.0",
-    "webpack-dev-middleware": "^1.10.2",
-    "webpack-dev-server": "^1.12.0",
-    "webpack-hot-middleware": "^2.18.0",
-    "webpack-material-design-icons": "^0.1.0",
+    "mocha": "^4.0.1",
+    "moment": "^2.20.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-tap-event-plugin": "^3.0.2",
+    "react-test-renderer": "^16.2.0",
+    "redux": "^3.7.2",
+    "rimraf": "^2.6.2",
+    "style-loader": "^0.19.1",
+    "uglifyjs-webpack-plugin": "1.1.4",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^2.0.2",
+    "webpack-dev-server": "^2.9.7",
+    "webpack-hot-middleware": "^2.21.0",
    "webpack-node-externals": "^1.6.0",
-    "webpack-shell-plugin": "^0.5.0",
-    "uglifyjs-webpack-plugin": "1.0.0-beta.2"
+    "webpack-shell-plugin": "^0.5.0"
  },
  "dependencies": {
-    "@aspnet/signalr-client": "^1.0.0-alpha1-final",
-    "adal-angular": "^1.0.15",
-    "cross-env": "^5.0.0",
-    "express": "^4.15.2",
+    "@aspnet/signalr-client": "^1.0.0-alpha2-final",
+    "adal-angular": "^1.0.16",
+    "babel-plugin-syntax-class-properties": "^6.13.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "cross-env": "^5.1.1",
+    "express": "^4.16.2",
    "msal": "^0.1.3",
-    "msgpack5": "^3.5.1",
    "object-path": "^0.11.4",
-    "object-path-immutable": "^0.5.2",
    "paginated-redux": "^0.2.2",
    "promise-retry": "^1.1.1",
-    "redux-mock-store": "^1.2.3",
+    "react-hot-loader": "^3.1.3",
+    "redux-mock-store": "^1.3.0",
    "redux-persist": "^5.4.0",
    "redux-persist-transform-filter": "0.0.16",
    "redux-thunk": "^2.2.0"
--- a/src/components/MainComponent.js
+++ b/src/components/MainComponent.js
@ -0,0 +1,47 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+import createBrowserHistory from 'history/createBrowserHistory'
+import { PersistGate } from 'redux-persist/lib/integration/react'
+
+import CreateIncident from './Search/CreateIncident'
+import Ticket from './Incident/Ticket'
+import CompareTickets from './Incident/CompareTickets'
+import EnsureLoggedInContainer from './Auth/EnsureLoggedIn'
+import incidentRedirect from './Incident/incidentRedirect'
+import Home from './Home'
+import TopNav from './TopNav/TopNav'
+import Debug from './Debug'
+
+const history = createBrowserHistory()
+
+export default class MainComponent extends React.Component {
+  render () {
+    return (
+      <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <Provider store={this.props.store}>
+          <PersistGate persistor={this.props.persistor}>
+            <div>
+              <EnsureLoggedInContainer>
+                <Router history={history} >
+                  <div>
+                    <TopNav />
+                    <Route exact path="/" component={Home} />
+                    <Route exact path="/extension.html" component={Home} />
+                    <Route path="/search" component={CreateIncident} />
+                    <Route path="/tickets/:ticketId" component={Ticket} />
+                    <Route path="/tickets/:firstTicketId/compare/:secondTicketId" component={CompareTickets} />
+                    <Route path="/incidents/:incidentId" component={incidentRedirect} />
+                    <Route path="/debug" render={() => <Debug />}/>
+                  </div>
+                </Router>
+              </EnsureLoggedInContainer>
+            </div>
+          </PersistGate>
+        </Provider>
+      </MuiThemeProvider>
+    )
+  }
+}
--- a/src/components/Search/CreateIncident.js
+++ b/src/components/Search/CreateIncident.js
@ -34,4 +34,4 @@ export const mapStateToProps = (state) => {
    }
 }

-export default connect(mapStateToProps)(CreateIncident)
+export default connect(mapStateToProps)(CreateIncident)
--- a/src/index.js
+++ b/src/index.js
@ -1,60 +1,32 @@
-import 'core-js/fn/object/assign'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
-import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import injectTapEventPlugin from 'react-tap-event-plugin'
-injectTapEventPlugin()
-require('./styles/App.css')
-import {
-  BrowserRouter as Router,
-  Route
-} from 'react-router-dom'
-import createBrowserHistory from 'history/createBrowserHistory'
-import CreateIncident from './components/Search/CreateIncident'
-import Ticket from './components/Incident/Ticket'
-import CompareTickets from './components/Incident/CompareTickets'
-import EnsureLoggedInContainer from './components/Auth/EnsureLoggedIn'
-import incidentRedirect from './components/Incident/incidentRedirect'
-import Home from './components/Home'
-import TopNav from './components/TopNav/TopNav'
-import Debug from './components/Debug'
+import { AppContainer as HotContainer } from 'react-hot-loader'
+
 import { store, persistor } from './configureStore'
-import { PersistGate } from 'redux-persist/lib/integration/react'
+import MainComponent from './components/MainComponent'

+require('./styles/App.css')

-const history = createBrowserHistory()
+injectTapEventPlugin()

-class MainComponent extends React.Component {
-  render() {
-    return (
-      <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <Provider store={store}>
-          <PersistGate persistor={persistor}>
-            <div>
-              <EnsureLoggedInContainer>
-                <Router history={history} >
-                  <div>
-                    <TopNav />
-                    <Route exact path="/" component={Home} />
-                    <Route exact path="/extension.html" component={Home} />
-                    <Route path="/search" component={CreateIncident} />
-                    <Route path="/tickets/:ticketId" component={Ticket} />
-                    <Route path="/tickets/:firstTicketId/compare/:secondTicketId" component={CompareTickets} />
-                    <Route path="/incidents/:incidentId" component={incidentRedirect} />
-                    <Route path="/debug" render={() => <Debug />}/>
-                  </div>
-                </Router>
-              </EnsureLoggedInContainer>
-            </div>
-          </PersistGate>
-        </Provider>
-      </MuiThemeProvider>
-    )
-  }
+const render = (Component, store, persistor) =>
+  ReactDOM.render(
+    <HotContainer>
+      <Component store={store} persistor={persistor} />
+    </HotContainer>,
+  document.getElementById('siaApp')
+)
+
+render(MainComponent, store, persistor)
+
+// Webpack Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./components/MainComponent', () => {
+    render(MainComponent, store, persistor)
+  })
+  // Enable Webpack hot module replacement for reducers
+  module.hot.accept('./reducers', () => {
+    store.replaceReducer(require('./reducers').default)
+  })
 }
-
-// Render the main component into the dom
-ReactDOM.render(<MainComponent />, document.getElementById('siaApp'))
-
--- a/test/helpers/shallowRenderHelper.js
+++ b/test/helpers/shallowRenderHelper.js
@ -6,7 +6,8 @@
 * @author somonsmith
 */
 import React from 'react'
-import TestUtils from 'react-dom/test-utils'
+import ShallowRenderer from 'react-test-renderer/shallow'
+
 /**
 * Get the shallow rendered component
 *
@ -15,8 +16,8 @@ import TestUtils from 'react-dom/test-utils'
 * @param  {Mixed} ...children [optional] List of children
 * @return {Object} Shallow rendered output
 */
-export default function createComponent(component, props = {}, ...children) {
-  const shallowRenderer = TestUtils.createRenderer()
+export default function createComponent (component, props = {}, ...children) {
+  const shallowRenderer = new ShallowRenderer()
  shallowRenderer.render(React.createElement(component, props, ...children))
  return shallowRenderer.getRenderOutput()
 }
--- a/test/loadtests.js
+++ b/test/loadtests.js
@ -1,8 +1,5 @@
 'use strict';

-require('babel-polyfill');
-require('core-js/fn/object/assign');
-
 // Add support for all files in the test directory
 const testsContext = require.context('.', true, /(Test|Helper)\.js$/);
-testsContext.keys().forEach(testsContext);
+testsContext.keys().forEach(testsContext);