Update to match final course demo

Author: coryhouse

README.md

@@ -1,6 +1,6 @@
 #JavaScript Development Environment
 
-This is a generic JavaScript development environment. This isn't tied to any specific JS framework.
+This is a generic JavaScript development environment that I build from scratch in ["Building a JavaScript Development Environment" on Pluralsight](https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents). This isn't tied to any specific JS framework.
 
 ## Get Started
 1. **Install [Node 6](https://nodejs.org)**. Need to run multiple versions of Node? Use [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows)
@@ -13,9 +13,11 @@ This will run the automated build process, start up a webserver, and open the ap
 
 ## Having Issues? Try these things first:
 1. Run `npm install` - If you forget to do this, you'll see this: `babel-node: command not found`.
-2. Make sure you're running the latest version of Node.
-3. Use [Node 5.12.0](https://nodejs.org/download/release/v5.12.0/) if you're having issues on Windows. Node 6 has issues on some Windows machines.
+2. Make sure you're running the latest version of Node. Or, use [Node 6.9.1](https://nodejs.org/en/download/releases/) if you're having issues on Windows. Node 7 has issues on some Windows machines.
+3. Make sure files with names that begin with a dot (.babelrc, .editorconfig, .eslintrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
 4. Don't run the project from a symbolic link. It will cause issues with file watches.
+5. Having linting issues? Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in the course.
+6. Nothing above work? Delete your node_modules folder and re-run npm install.
 
 ###Development Dependencies
 | **Dependency** | **Use** |

buildScripts/mockDataSchema.js

@@ -1,7 +1,7 @@
 export const schema = {
   "type": "object",
   "properties": {
-    "calculations": {
+    "users": {
       "type": "array",
       "minItems": 3,
       "maxItems": 5,
@@ -13,37 +13,22 @@ export const schema = {
             "unique": true,
             "minimum": 1
           },
-          "country": {
+          "firstName": {
             "type": "string",
-            "faker": "address.country"
+            "faker": "name.firstName"
           },
-          "newMpg": {
-            "type": "number",
-            "minimum": 12,
-            "maximum": 55
-          },
-          "tradeMpg": {
-            "type": "number",
-            "minimum": 12,
-            "maximum": 55
-          },
-          "pricePerGallon": {
+          "lastName": {
             "type": "string",
-            "chance": {
-              "dollar": {
-                "max": 5
-              }
-            }
+            "faker": "name.lastName",
           },
-          "milesDrivenPerMonth": {
-            "type": "number",
-            "minimum": 100,
-            "maximum": 1500
+          "email": {
+            "type": "string",
+            "faker": "internet.email",
           }
         },
-        required: ['id', 'country', 'newMpg', 'tradeMpg', 'pricePerGallon', 'milesDrivenPerMonth']
+        required: ['id', 'firstName', 'lastName', 'email']
       }
     }
   },
-  required: ['calculations']
+  required: ['users']
 };

package.json

@@ -4,31 +4,27 @@
   "description": "JavaScript development environment Pluralsight course by Cory House",
   "scripts": {
     "prestart": "babel-node buildScripts/startMessage.js",
-    "start": "npm-run-all --parallel security-check test:watch start-mockapi open:src lint:watch",
+    "start": "npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi",
     "open:src": "babel-node buildScripts/srcServer.js",
     "lint": "esw webpack.config.* src buildScripts --color",
     "lint:watch": "npm run lint -- --watch",
-    "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
-    "test:watch": "npm run test -- --watch",
-    "clean-dist": "npm run remove-dist && mkdir dist",
-    "remove-dist": "rimraf ./dist",
-    "build:html": "babel-node buildScripts/buildHtml.js",
-    "prebuild": "npm-run-all clean-dist test lint build:html",
-    "build": "babel-node buildScripts/build.js",
-    "postbuild": "babel-node buildScripts/distServer.js",
     "security-check": "nsp check",
     "localtunnel": "lt --port 3000",
     "share": "npm-run-all --parallel open:src localtunnel",
-    "deploy": "surge ./dist --domain fuelcalc.surge.sh",
+    "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
+    "test:watch": "npm run test -- --watch",
+    "generate-mock-data": "babel-node buildScripts/generateMockData",
     "prestart-mockapi": "npm run generate-mock-data",
     "start-mockapi": "json-server --watch src/api/db.json --port 3001",
-    "generate-mock-data": "babel-node buildScripts/generateMockData",
+    "clean-dist": "rimraf ./dist && mkdir dist",
+    "prebuild": "npm-run-all clean-dist test lint",
+    "build": "babel-node buildScripts/build.js",
+    "postbuild": "babel-node buildScripts/distServer.js",
     "deploy": "surge ./dist"
   },
   "author": "Cory House",
   "license": "MIT",
   "dependencies": {
-    "numeral": "1.5.3",
     "whatwg-fetch": "1.0.0"
   },
   "devDependencies": {
@@ -40,34 +36,31 @@
     "chai": "3.5.0",
     "chalk": "1.1.3",
     "cheerio": "0.22.0",
-    "compression": "^1.6.2",
-    "cross-env": "3.0.0",
+    "compression": "1.6.2",
+    "cross-env": "3.1.3",
     "css-loader": "0.25.0",
-    "eslint": "3.7.0",
-    "eslint-plugin-import": "2.0.0",
+    "eslint": "3.8.1",
+    "eslint-plugin-import": "2.0.1",
     "eslint-watch": "2.1.14",
     "express": "4.14.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "1.0.1",
     "html-webpack-plugin": "2.22.0",
-    "jsdom": "9.6.0",
+    "jsdom": "9.8.0",
     "json-schema-faker": "0.3.6",
-    "json-server": "0.8.21",
+    "json-server": "0.8.22",
     "localtunnel": "1.8.1",
-    "mocha": "3.1.0",
-    "nock": "8.0.0",
-    "npm-run-all": "3.1.0",
-    "nsp": "2.6.1",
+    "mocha": "3.1.2",
+    "nock": "8.1.0",
+    "npm-run-all": "3.1.1",
+    "nsp": "2.6.2",
+    "numeral": "1.5.3",
     "open": "0.0.5",
     "rimraf": "2.5.4",
-    "style-loader": "^0.13.1",
+    "style-loader": "0.13.1",
     "surge": "0.18.0",
     "webpack": "1.13.2",
-    "webpack-dev-middleware": "1.8.3",
-    "webpack-hot-middleware": "2.12.2",
+    "webpack-dev-middleware": "1.8.4",
+    "webpack-hot-middleware": "2.13.0",
     "webpack-md5-hash": "0.0.5"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
   }
 }

src/api/baseUrl.js

@@ -1,4 +1,13 @@
 export default function getBaseUrl() {
-  const inDevelopment = (global.window && global.window.location.hostname === 'localhost');
-  return inDevelopment ? 'http://localhost:3001/' : '/';
+  return getQueryStringParameterByName('useMockApi') ? 'http://localhost:3001/' : 'https://mysterious-dawn-16770.herokuapp.com/';
+}
+
+function getQueryStringParameterByName(name, url) {
+  if (!url) url = window.location.href;
+  name = name.replace(/[\[\]]/g, "\\$&");
+  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+      results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, " "));
 }

src/api/api.js renamed to src/api/userApi.js

@@ -3,12 +3,12 @@ import getBaseUrl from './baseUrl';
 
 const baseUrl = getBaseUrl();
 
-export function getCalculations() {
-  return get('calculations');
+export function getUsers() {
+  return get('users');
 }
 
-export function deleteCalculation(id) {
-  return del(`calculations/${id}`);
+export function deleteUser(id) {
+  return del(`users/${id}`);
 }
 
 function get(url) {

src/index.ejs

@@ -1,56 +1,41 @@
-<!DOCTYPE html>
+<!--
+  **NOTE:** This is a template for index.html.
+  It uses ejs and htmlWebpackPlugin to generate a different index.html for each environment.
+  htmlWebpackPlugin will dynamically add references to the scripts and styles that it bundles
+  to this file. The generated bundles have hash-based filenames,
+  so it's necessary to add the references dynamically.
+  For more info on ejs, see http://www.embeddedjs.com/.
+  For examples of using it with htmlWebpackPlugin,
+  see https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs
+  -->
+  <!DOCTYPE html>
 <html lang="en">
 <head>
+    <!--
+    The htmlWebpackPlugin will parse the logic below so that trackJS is only added to the production version of index.html (since only webpack.config.prod.js provides the trackJS token)
+    This is an example of how to add features to index.html for only one environment.
+   -->
+    <% if (htmlWebpackPlugin.options.trackJSToken) { %>
+    <!-- BEGIN TRACKJS -->
+    <script type="text/javascript">window._trackJs = { token: '<%=htmlWebpackPlugin.options.trackJSToken%>' };</script>
+    <script type="text/javascript" src="https://cdn.trackjs.com/releases/current/tracker.js"></script>
+    <!-- END TRACKJS -->
+    <% } %>
   <meta charset="UTF-8">
-  <title>Fuel Savings Calculator</title>
 </head>
 <body>
-<h2 id="main-heading">Fuel Savings Calculator</h2>
-<table>
-  <tbody>
-  <tr>
-    <td><label for="newMpg">New Vehicle MPG</label></td>
-    <td><input type="text" id="newMpg">
-    </td>
-  </tr>
-  <tr>
-    <td><label for="tradeMpg">Trade-in MPG</label></td>
-    <td><input type="text" id="tradeMpg" />
-    </td>
-  </tr>
-  <tr>
-    <td><label for="pricePerGallon">Price Per Gallon</label></td>
-    <td><input type="text" id="pricePerGallon" />
-    </td>
-  </tr>
-  <tr>
-    <td><label for="milesDrivenPerMonth">Miles Driven per month</label></td>
-    <td>
-      <input type="text" id="milesDrivenPerMonth" />
-    </td>
-  </tr>
-  <tr>
-    <td>Savings / Loss</td>
-    <td id="result"></td>
-  </tr>
-  </tbody>
-</table>
+  <h1>Users</h1>
+  <table>
+    <thead>
+      <th>&nbsp;</th>
+      <th>Id</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Email</th>
+    </thead>
+    <tbody id="users">
 
-
-<h2>Previous Calculations</h2>
-<table>
-  <thead>
-    <th>&nbsp;</th>
-    <th>New MPG</th>
-    <th>Trade MPG</th>
-    <th>Price Per Gallon</th>
-    <th>Miles Driven Per Month</th>
-  </thead>
-  <tbody id="calculations">
-
-  </tbody>
-</table>
-
-<script src="bundle.js"></script>
+    </tbody>
+  </table>
 </body>
 </html>