Totally revamped to use webpack!

.babelrc

@@ -0,0 +1,21 @@
+{
+    "env": {
+        "production": {
+            "plugins": [
+                ["emotion", {
+                    "hoist": true
+                }]
+            ]
+        },
+        "development": {
+            "plugins": [
+                ["emotion", {
+                    "sourceMap": true,
+                    "autoLabel": true
+                }]
+            ]
+        }
+    },
+    "presets": ["env", "react", "stage-2"],
+    "plugins": ["emotion", "react-hot-loader/babel"]
+}

.eslintrc

@@ -0,0 +1,35 @@
+{
+    "extends": [
+        "prettier",
+        "plugin:prettier/recommended",
+        "eslint:recommended"
+    ],
+    "parser": "babel-eslint",
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true,
+        "jest": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2017,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "globals": {
+        "document": true,
+        "window": true,
+        "location": true
+    },
+    "rules": {
+        "prettier/prettier": "error",
+        "no-unused-vars": 1,
+        "no-console": 1,
+        "indent": [true, 4]
+    },
+    "plugins": [
+        "prettier"
+    ]
+}

.gitignore

@@ -1,3 +1,78 @@
-node_modules
-build
+.DS_Store
+
+# Logs
+logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build
+dist/
+build/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# cache
+.cache/
+
+# Editors
+# VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "useTabs": false,
+    "semi": true,
+    "printWidth": 80,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": false,
+    "parser": "babylon"
+}

README.md

@@ -59,18 +59,5 @@ npm start
 ```
 Then open up a browser to
 ```
-localhost:3000
+localhost:8080
 ```
-
-# To Compile and Run Using Docker
-```
-git clone https://github.com/planetlabs/viewpoints.git
-cd viewpoints
-docker build -t viewpoints .
-docker run -it [--env='NODE_ENV=production'] [--volume "$PWD":/usr/src/app] viewpoints
-```
-In the output will be section of "Access URLs" and the main interface is labelled "External"
-
-The optional `--env` option will speed things up by disabling React's Prototype checks.
-
-The optional `--volume` option will mount the viewpoints directory in the docker image. Without this option, you must `docker build` and `docker run` every time you want to see local changes in the running viewpoints. With the option, you only need to `docker build` when you would otherwise `npm install`.

config/devServer.config.js

@@ -0,0 +1,7 @@
+const PATHS = require("./paths.config");
+
+module.exports = {
+    contentBase: PATHS.build,
+    progress: true,
+    hot: true
+};

config/paths.config.js

@@ -0,0 +1,9 @@
+const path = require("path");
+
+module.exports = {
+    root: path.resolve(__dirname, ".."),
+    config: path.resolve(__dirname),
+    src: path.resolve(__dirname, "../src"),
+    build: path.resolve(__dirname, "../dist"),
+    modules: path.resolve(__dirname, "../node_modules")
+};

config/stats.config.js

@@ -0,0 +1,116 @@
+const PATHS = require("./paths.config");
+
+module.exports = {
+    // fallback value for stats options when an option is not defined (has
+    // precedence over local webpack defaults) all: undefined, Add asset Information
+    assets: true,
+
+    // Sort assets by a field You can reverse the sort with `!field`.
+    assetsSort: "field",
+
+    // Add build date and time information
+    builtAt: true,
+
+    // Add information about cached (not built) modules
+    cached: true,
+
+    // Show cached assets (setting this to `false` only shows emitted files)
+    cachedAssets: true,
+
+    // Add children information
+    children: true,
+
+    // Add chunk information (setting this to `false` allows for a less verbose
+    // output)
+    chunks: true,
+
+    // Add built modules information to chunk information
+    chunkModules: true,
+
+    // Add the origins of chunks and chunk merging info
+    chunkOrigins: true,
+
+    // Sort the chunks by a field You can reverse the sort with `!field`. Default is
+    // `id`.
+    chunksSort: "field",
+
+    // Context directory for request shortening
+    context: PATHS.src,
+
+    // `webpack --colors` equivalent
+    colors: false,
+
+    // Display the distance from the entry point for each module
+    depth: false,
+
+    // Display the entry points with the corresponding bundles
+    entrypoints: false,
+
+    // Add --env information
+    env: false,
+
+    // Add errors
+    errors: true,
+
+    // Add details to errors (like resolving log)
+    errorDetails: true,
+
+    // Exclude assets from being displayed in stats This can be done with a String,
+    // a RegExp, a Function getting the assets name and returning a boolean or an
+    // Array of the above. excludeAssets: "filter" | /filter/ | (assetName) =>
+    // ...return true | false | ["filter"] | [/filter/] | [(assetName) => ...return
+    // true | false], Exclude modules from being displayed in stats This can be done
+    // with a String, a RegExp, a Function getting the modules source and returning
+    // a boolean or an Array of the above. excludeModules: "filter" | /filter/ |
+    // (moduleSource) => ...return true | false | ["filter"] | [/filter/] |
+    // [(moduleSource) => ...return true | false], See excludeModules exclude:
+    // "filter" | /filter/ | (moduleSource) => ...return true | false | ["filter"] |
+    // [/filter/] | [(moduleSource) => ...return true | false], Add the hash of the
+    // compilation
+    hash: true,
+
+    // Set the maximum number of modules to be shown
+    maxModules: 15,
+
+    // Add built modules information
+    modules: true,
+
+    // Sort the modules by a field You can reverse the sort with `!field`. Default
+    // is `id`.
+    modulesSort: "field",
+
+    // Show dependencies and origin of warnings/errors (since webpack 2.5.0)
+    moduleTrace: true,
+
+    // Show performance hint when file size exceeds `performance.maxAssetSize`
+    performance: true,
+
+    // Show the exports of the modules
+    providedExports: false,
+
+    // Add public path information
+    publicPath: true,
+
+    // Add information about the reasons why modules are included
+    reasons: true,
+
+    // Add the source code of modules
+    source: true,
+
+    // Add timing information
+    timings: true,
+
+    // Show which exports of a module are used
+    usedExports: false,
+
+    // Add webpack version information
+    version: true,
+
+    // Add warnings
+    warnings: true
+
+    // Filter warnings to be shown (since webpack 2.4.0), can be a String, Regexp, a
+    // function getting the warning and returning a boolean or an Array of a
+    // combination of the above. First match wins. warningsFilter: "filter" |
+    // /filter/ | ["filter", /filter/] | (warning) => ...return true | false
+};

config/webpack.config.base.js

@@ -0,0 +1,69 @@
+// Imports
+const path = require("path");
+const webpack = require("webpack");
+
+// Plugins
+const Dotenv = require("dotenv-webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+// Check for development mode
+const IS_DEV = process.env.NODE_ENV === "development";
+
+// Configurations
+const PATHS = require("./paths.config");
+const stats = require("./stats.config");
+
+// Webpack Base Configuration
+const config = {
+    entry: path.join(PATHS.src, "index.js"),
+    stats: stats,
+    output: {
+        path: PATHS.build,
+        pathinfo: true,
+        publicPath: "/"
+    },
+    resolve: {
+        extensions: ["*", ".js", ".jsx"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        cacheDirectory: true
+                    }
+                }
+            },
+            {
+                test: /\.less$/,
+                use: [{
+                    loader: 'style-loader' // creates style nodes from JS strings
+                }, {
+                    loader: 'css-loader' // translates CSS into CommonJS
+                }, {
+                    loader: 'less-loader', // compiles Less to CSS
+                    options: {
+                        paths: [PATHS.modules]
+                    }
+                }]
+            }
+        ]
+    },
+    plugins: [
+        new Dotenv({
+            path: path.join(PATHS.root, ".env"), // load this now instead of the ones in '.env'
+            safe: false, // Load '.env.example' to verify the '.env' variables are all set. Can also be a string to a different file.
+            systemvars: true, // Load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
+            silent: false // Hide errors
+        }),
+        new HtmlWebpackPlugin({
+            filename: "index.html",
+            template: path.join(PATHS.src, "index.html")
+        })
+    ]
+};
+
+module.exports = config;