Update 2021

.babelrc

@@ -1,5 +1,15 @@
 {
-  "presets": [
-    "latest"
-  ]
+  "presets": ["@babel/preset-env"],
+  "env": {
+    "production": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "> 0.25%, not dead"
+          }
+        ]
+      ]
+    }
+  }
 }

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "6"
+  - "14"

README.md

@@ -4,7 +4,7 @@ This is a generic JavaScript development environment that I build from scratch i
 
 ## Get Started
 
-1. **Install [Node 6 or newer](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)
+1. **Install [Node 12 or newer](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)
 2. **Clone this repository.** - `git clone https://github.com/coryhouse/javascript-development-environment.git` or [download the zip](https://github.com/coryhouse/javascript-development-environment/archive/master.zip)
 3. **Make sure you're in the directory you just created.** - `cd javascript-development-environment`
 4. **Install Node Packages.** - `npm install`
@@ -24,37 +24,39 @@ This is a generic JavaScript development environment that I build from scratch i
 
 ### Development Dependencies
 
-| **Dependency**              | **Use**                                                                                                   |
-| --------------------------- | --------------------------------------------------------------------------------------------------------- |
-| babel-cli                   | Babel Command line interface                                                                              |
-| babel-core                  | Babel Core for transpiling the new JavaScript to old                                                      |
-| babel-loader                | Adds Babel support to Webpack                                                                             |
-| babel-preset-latest         | Babel preset for running all the latest standardized JavaScript features                                  |
-| babel-register              | Register Babel to transpile our Mocha tests                                                               |
-| chai                        | Assertion library                                                                                         |
-| chalk                       | Colored command line output                                                                               |
-| cheerio                     | Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation |
-| compression                 | gzip http output                                                                                          |
-| cross-env                   | Cross-environment friendly way to handle environment variables                                            |
-| css-loader                  | Add CSS support to Webpack                                                                                |
-| eslint                      | Lints JavaScript                                                                                          |
-| eslint-plugin-import        | Advanced linting of ES6 imports                                                                           |
-| eslint-watch                | Add watch functionality to ESLint                                                                         |
-| express                     | Serves development and production builds                                                                  |
-| extract-text-webpack-plugin | Extracts CSS into separate file for production build                                                      |
-| html-webpack-plugin         | Generate HTML file programatically via Webpack                                                            |
-| jsdom                       | In-memory DOM for testing                                                                                 |
-| json-schema-faker           | Declare a JSON schema for generating fake data                                                            |
-| json-server                 | Serve a JSON API locally                                                                                  |
-| localtunnel                 | Create a tunnel to your local machine                                                                     |
-| mocha                       | JavaScript testing library                                                                                |
-| nock                        | Mock HTTP requests via Node                                                                               |
-| npm-run-all                 | Display results of multiple commands on single command line                                               |
-| numeral                     | Library for working with numbers                                                                          |
-| open                        | Open app in default browser                                                                               |
-| rimraf                      | Delete files                                                                                              |
-| style-loader                | Add Style support to Webpack                                                                              |
-| webpack                     | Bundler with plugin system and integrated development server                                              |
-| webpack-dev-middleware      | Adds middleware support to webpack                                                                        |
-| webpack-hot-middleware      | Adds hot reloading to webpack                                                                             |
-| webpack-md5-hash            | Used to hash files generated by Webpack using MD5 so that their names change when the content changes     |
+| **Dependency**          | **Use**                                                                                                   |
+| ----------------------- | --------------------------------------------------------------------------------------------------------- |
+| @babel/cli              | Babel Command line interface                                                                              |
+| @babel/core             | Babel Core for transpiling the new JavaScript to old                                                      |
+| @babel/node             | Run Babel via Node                                                                                        |
+| @babel/preset-env       | Babel preset for compiling to specific environments                                                       |
+| @babel/register         | Register Babel to transpile our Mocha tests                                                               |
+| babel-loader            | Adds Babel support to Webpack                                                                             |
+| chai                    | Assertion library                                                                                         |
+| chalk                   | Colored command line output                                                                               |
+| cheerio                 | Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation |
+| compression             | gzip http output                                                                                          |
+| cross-env               | Cross-environment friendly way to handle environment variables                                            |
+| css-loader              | Add CSS support to Webpack                                                                                |
+| eslint                  | Lints JavaScript                                                                                          |
+| eslint-plugin-import    | Advanced linting of ES6 imports                                                                           |
+| eslint-watch            | Add watch functionality to ESLint                                                                         |
+| express                 | Serves development and production builds                                                                  |
+| faker                   | Generates realistic fake data                                                                             |
+| html-webpack-plugin     | Generate HTML file programatically via Webpack                                                            |
+| jsdom                   | In-memory DOM for testing                                                                                 |
+| json-schema-faker       | Declare a JSON schema for generating fake data                                                            |
+| json-server             | Serve a JSON API locally                                                                                  |
+| mini-css-extract-plugin | Extract CSS to a separate file and minimize                                                               |
+| mocha                   | JavaScript testing library                                                                                |
+| nock                    | Mock HTTP requests via Node                                                                               |
+| npm-run-all             | Display results of multiple commands on single command line                                               |
+| numeral                 | Library for working with numbers                                                                          |
+| open                    | Open app in default browser                                                                               |
+| rimraf                  | Delete files                                                                                              |
+| style-loader            | Add Style support to Webpack                                                                              |
+| surge                   | Host a static site via a CLI command                                                                      |
+| webpack                 | Bundler with plugin system and integrated development server                                              |
+| webpack-dev-middleware  | Adds middleware support to webpack                                                                        |
+| webpack-hot-middleware  | Adds hot reloading to webpack                                                                             |
+| whatwg-fetch            | Polyfill for the Browser's native fetch for older browsers                                                |

appveyor.yml

@@ -1,8 +1,8 @@
 # Test against this version of Node.js
 environment:
   matrix:
-  # node.js
-  - nodejs_version: "6"
+    # node.js
+    - nodejs_version: "14"
 
 # Install scripts. (runs after repo cloning)
 install:

buildScripts/build.js

@@ -1,35 +1,40 @@
-// More info on Webpack's Node API here: https://webpack.github.io/docs/node.js-api.html
-// Allowing console calls below since this is a build file.
 /*eslint-disable no-console */
-import webpack from 'webpack';
-import webpackConfig from '../webpack.config.prod';
-import chalk from 'chalk';
+import webpack from "webpack";
+import webpackConfig from "../webpack.config.prod";
+import chalk from "chalk";
 
-process.env.NODE_ENV = 'production'; // this assures the Babel dev config doesn't apply.
+process.env.NODE_ENV = "production"; // this assures the Babel dev config doesn't apply.
 
-console.log(chalk.blue('Generating minified bundle for production. This will take a moment...'));
+console.log(
+  chalk.blue(
+    "Generating minified bundle for production. This will take a moment..."
+  )
+);
 
 webpack(webpackConfig).run((err, stats) => {
-  if (err) { // so a fatal error occurred. Stop here.
+  if (err) {
+    // so a fatal error occurred. Stop here.
     console.log(chalk.red(err));
     return 1;
   }
 
   const jsonStats = stats.toJson();
 
   if (jsonStats.hasErrors) {
-    return jsonStats.errors.map(error => console.log(chalk.red(error)));
+    return jsonStats.errors.map((error) => console.log(chalk.red(error)));
   }
 
   if (jsonStats.hasWarnings) {
-    console.log(chalk.yellow('Webpack generated the following warnings: '));
-    jsonStats.warnings.map(warning => console.log(chalk.yellow(warning)));
+    console.log(chalk.yellow("Webpack generated the following warnings: "));
+    jsonStats.warnings.map((warning) => console.log(chalk.yellow(warning)));
   }
 
   console.log(`Webpack stats: ${stats}`);
 
   // if we got this far, the build succeeded.
-  console.log(chalk.green('Your app has been built for production and written to /dist!'));
+  console.log(
+    chalk.green("Your app has been built for production and written to /dist!")
+  );
 
   return 0;
 });

buildScripts/buildHtml.js

@@ -1,26 +1,26 @@
 // This script copies src/index.html into /dist/index.html
 // This is a good example of using Node and cheerio to do a simple file transformation.
 // In this case, the transformation is useful since we only use a separate css file in prod.
-import fs from 'fs';
-import cheerio from 'cheerio';
-import chalk from 'chalk';
+import fs from "fs";
+import cheerio from "cheerio";
+import chalk from "chalk";
 
 /*eslint-disable no-console */
 
-fs.readFile('src/index.html', 'utf8', (err, markup) => {
+fs.readFile("src/index.html", "utf8", (err, markup) => {
   if (err) {
     return console.log(err);
   }
 
   const $ = cheerio.load(markup);
 
   // since a separate spreadsheet is only utilized for the production build, need to dynamically add this here.
-  $('head').prepend('<link rel="stylesheet" href="styles.css">');
+  $("head").prepend('<link rel="stylesheet" href="styles.css">');
 
-  fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) {
+  fs.writeFile("dist/index.html", $.html(), "utf8", function (err) {
     if (err) {
       return console.log(err);
     }
-    console.log(chalk.green('index.html written to /dist'));
+    console.log(chalk.green("index.html written to /dist"));
   });
 });

buildScripts/distServer.js

@@ -1,21 +1,40 @@
-import express from 'express';
-import path from 'path';
-import open from 'open';
-import compression from 'compression';
+import express from "express";
+import path from "path";
+import open from "open";
+import compression from "compression";
 
-/*eslint-disable no-console */
+/* eslint-disable no-console */
 
 const port = 3000;
 const app = express();
 
-app.use(express.static('dist'));
+app.use(express.static("dist"));
 app.use(compression());
 
-app.get('*', function(req, res) {
-  res.sendFile(path.join(__dirname, '../dist/index.html'));
+app.get("*", function (req, res) {
+  res.sendFile(path.join(__dirname, "../dist/index.html"));
 });
 
-app.listen(port, function(err) {
+app.get("/users", function (req, res) {
+  // Hard coding for simplicity. Pretend this hits a real database
+  res.json([
+    { id: 1, firstName: "Bob", lastName: "Smith", email: "[email protected]" },
+    {
+      id: 2,
+      firstName: "Tammy",
+      lastName: "Norton",
+      email: "[email protected]",
+    },
+    {
+      id: 3,
+      firstName: "Tina",
+      lastName: "Lee",
+      email: "[email protected]",
+    },
+  ]);
+});
+
+app.listen(port, function (err) {
   if (err) {
     console.log(err);
   } else {

buildScripts/generateMockData.js

@@ -6,12 +6,14 @@
 
 /* eslint-disable no-console */
 
-import jsf from 'json-schema-faker';
-import {schema} from './mockDataSchema';
-import fs from 'fs';
-import chalk from 'chalk';
+import { generate, extend } from "json-schema-faker";
+import { schema } from "./mockDataSchema";
+import fs from "fs";
+import chalk from "chalk";
 
-const json = JSON.stringify(jsf(schema));
+// Extend JSF with the fake libs you want to use.
+extend("faker", () => require("faker"));
+const json = JSON.stringify(generate(schema));
 
 fs.writeFile("./src/api/db.json", json, function (err) {
   if (err) {

buildScripts/mockDataSchema.js

@@ -1,34 +1,33 @@
 export const schema = {
-  "type": "object",
-  "properties": {
-    "users": {
-      "type": "array",
-      "minItems": 3,
-      "maxItems": 5,
-      "items": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "number",
-            "unique": true,
-            "minimum": 1
+  type: "object",
+  properties: {
+    users: {
+      type: "array",
+      minItems: 3,
+      maxItems: 5,
+      items: {
+        type: "object",
+        properties: {
+          id: {
+            type: "integer",
+            minimum: 1,
           },
-          "firstName": {
-            "type": "string",
-            "faker": "name.firstName"
+          firstName: {
+            type: "string",
+            faker: "name.firstName",
           },
-          "lastName": {
-            "type": "string",
-            "faker": "name.lastName"
+          lastName: {
+            type: "string",
+            faker: "name.lastName",
+          },
+          email: {
+            type: "string",
+            faker: "internet.email",
           },
-          "email": {
-            "type": "string",
-            "faker": "internet.email"
-          }
         },
-        "required": ["id", "firstName", "lastName", "email"]
-      }
-    }
+        required: ["id", "firstName", "lastName", "email"],
+      },
+    },
   },
-  "required": ["users"]
+  required: ["users"],
 };