Initial commit

Author: coryhouse

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true
+  },
+  "rules": {
+    "quotes": 0,
+    "no-console": 1,
+    "no-debugger": 1,
+    "no-var": 1,
+    "semi": [1, "always"],
+    "no-trailing-spaces": 0,
+    "eol-last": 0,
+    "no-unused-vars": 0,
+    "no-underscore-dangle": 0,
+    "no-alert": 0,
+    "no-lone-blocks": 0
+  }
+}

.gitignore

@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+#Webstorm
+.idea

README.md

@@ -0,0 +1,74 @@
+#Starter Kit for [Building Applications in React and Redux in ES6](http://www.pluralsight.com/author/cory-house) on Pluralsight
+
+## 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)
+2. **Clone this repository.** - `git clone https://github.com/coryhouse/pluralsight-redux-starter.git` or [download the zip](https://github.com/coryhouse/pluralsight-redux-starter/archive/master.zip)
+3. **Make sure you're in the directory you just created.** - `cd pluralsight-redux-starter`
+4. **Install Node Packages.** - `npm install`
+5. **Run the app.** - `npm start -s`
+This will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching files all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
+6. **Install [React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Redux Dev Tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)** in Chrome.
+7. Having issues? See below.
+
+## 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 the path doesn't include any spaces, or install the latest version of eslint-watch which adds support for paths containing spaces: `npm install [email protected]`
+3. Make sure you're running the latest version of Node.
+4. 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.
+5. Don't run the project from a symbolic link. It will cause issues with file watches.
+
+###Production Dependencies
+| **Dependency** | **Use** |
+|----------|-------|
+|babel-polyfill | Polyfill for Babel features that cannot be transpiled |
+|bootstrap|CSS Framework|
+|jquery|Only used to support toastr|
+|react|React library |
+|react-dom|React library for DOM rendering |
+|react-redux|Redux library for connecting React components to Redux |
+|react-router|React library for routing |
+|react-router-redux|Keep React Router in sync with Redux application state|
+|redux|Library for unidirectional data flows |
+|redux-thunk|Async redux library|
+|toastr|Display messages to the user|
+
+###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-plugin-react-display-name| Add displayName to React.createClass calls |
+|babel-preset-es2015|Babel preset for ES2015|
+|babel-preset-react| Add JSX support to Babel |
+|babel-preset-react-hmre|Hot reloading preset for Babel|
+|babel-register|Register Babel to transpile our Mocha tests|
+|cheerio|Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation|
+|colors|Adds color support to terminal |
+|compression|Add gzip support to Express|
+|cross-env|Cross-environment friendly way to handle environment variables|
+|css-loader|Add CSS support to Webpack|
+|enzyme|Simplified JavaScript Testing utilities for React|
+|eslint|Lints JavaScript |
+|eslint-plugin-import|Advanced linting of ES6 imports|
+|eslint-plugin-react|Adds additional React-related rules to ESLint|
+|eslint-watch|Add watch functionality to ESLint |
+|eventsource-polyfill|Polyfill to support hot reloading in IE|
+|expect|Assertion library for use with Mocha|
+|express|Serves development and production builds|
+|extract-text-webpack-plugin| Extracts CSS into separate file for production build | 
+|file-loader| Adds file loading support to Webpack |
+|jsdom|In-memory DOM for testing|
+|mocha| JavaScript testing library |
+|nock| Mock HTTP requests for testing |
+|npm-run-all| Display results of multiple commands on single command line |
+|open|Open app in default browser|
+|react-addons-test-utils| Adds React TestUtils |
+|redux-immutable-state-invariant|Warn when Redux state is mutated|
+|redux-mock-store|Mock Redux store for testing|
+|rimraf|Delete files |
+|style-loader| Add Style support to Webpack |
+|url-loader| Add url loading 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 |

buildTools/build.js

@@ -0,0 +1,35 @@
+// 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 colors from 'colors';
+
+process.env.NODE_ENV = 'production'; // this assures the Babel dev config (for hot reloading) doesn't apply.
+
+console.log('Generating minified bundle for production via Webpack. This will take a moment...'.blue);
+
+webpack(webpackConfig).run((err, stats) => {
+  if (err) { // so a fatal error occurred. Stop here.
+    console.log(err.bold.red);
+    return 1;
+  }
+
+  const jsonStats = stats.toJson();
+
+  if (jsonStats.hasErrors) {
+    return jsonStats.errors.map(error => console.log(error.red));
+  }
+
+  if (jsonStats.hasWarnings) {
+    console.log('Webpack generated the following warnings: '.bold.yellow);
+    jsonStats.warnings.map(warning => console.log(warning.yellow));
+  }
+
+  console.log(`Webpack stats: ${stats}`);
+
+  // if we got this far, the build succeeded.
+  console.log('Your app has been compiled in production mode and written to /dist. It\'s ready to roll!'.green);
+
+  return 0;
+});

buildTools/buildHtml.js

@@ -0,0 +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 colors from 'colors';
+
+/*eslint-disable no-console */
+
+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">');
+
+  fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('index.html written to /dist'.green);
+  });
+});

buildTools/distServer.js

@@ -0,0 +1,24 @@
+import express from 'express';
+import path from 'path';
+import open from 'open';
+import compression from 'compression';
+
+/*eslint-disable no-console */
+
+const port = 3000;
+const app = express();
+
+app.use(compression());
+app.use(express.static('dist'));
+
+app.get('*', function(req, res) {
+  res.sendFile(path.join(__dirname, '../dist/index.html'));
+});
+
+app.listen(port, function(err) {
+  if (err) {
+    console.log(err);
+  } else {
+    open(`http://localhost:${port}`);
+  }
+});

buildTools/srcServer.js

@@ -0,0 +1,30 @@
+import express from 'express';
+import webpack from 'webpack';
+import path from 'path';
+import config from '../webpack.config.dev';
+import open from 'open';
+
+/* eslint-disable no-console */
+
+const port = 3000;
+const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.get('*', function(req, res) {
+  res.sendFile(path.join( __dirname, '../src/index.html'));
+});
+
+app.listen(port, function(err) {
+  if (err) {
+    console.log(err);
+  } else {
+    open(`http://localhost:${port}`);
+  }
+});

buildTools/startMessage.js

@@ -0,0 +1,5 @@
+import colors from 'colors';
+
+/*eslint-disable no-console */
+
+console.log('Starting app in dev mode...'.green);

buildTools/testSetup.js

@@ -0,0 +1,43 @@
+// Tests are placed alongside files under test.
+// This file does the following:
+// 1. Registers babel for transpiling our code for testing
+// 2. Disables Webpack-specific features that Mocha doesn't understand.
+// 3. Requires jsdom so we can test via an in-memory DOM in Node
+// 4. Sets up global vars that mimic a browser.
+
+/*eslint-disable no-var*/
+
+// This assures the .babelrc dev config (which includes
+// hot module reloading code) doesn't apply for tests.
+process.env.NODE_ENV = 'test';
+
+// Register babel so that it will transpile ES6 to ES5
+// before our tests run.
+require('babel-register')();
+
+// Disable webpack-specific features for tests since
+// Mocha doesn't know what to do with them.
+require.extensions['.css'] = function () {return null;};
+require.extensions['.png'] = function () {return null;};
+require.extensions['.jpg'] = function () {return null;};
+
+// Configure JSDOM and set global variables
+// to simulate a browser environment for tests.
+var jsdom = require('jsdom').jsdom;
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+documentRef = document;  //eslint-disable-line no-undef

package.json

@@ -0,0 +1,77 @@
+{
+  "name": "javascript-development-environment",
+  "version": "1.0.0",
+  "description": "JavaScript development environment Pluralsight course by Cory House",
+  "scripts": {
+    "prestart": "babel-node tools/startMessage.js",
+    "start": "npm-run-all --parallel test:watch open:src lint:watch",
+    "open:src": "babel-node tools/srcServer.js",
+    "lint": "node_modules/.bin/esw webpack.config.* src tools",
+    "lint:watch": "npm run lint -- --watch",
+    "test": "mocha --reporter progress tools/testSetup.js src/**/*.test.js src/components/**/*.test.js",
+    "test:watch": "npm run test -- --watch",
+    "clean-dist": "npm run remove-dist && mkdir dist",
+    "remove-dist": "node_modules/.bin/rimraf ./dist",
+    "build:html": "babel-node tools/buildHtml.js",
+    "prebuild": "npm-run-all clean-dist test lint build:html",
+    "build": "babel-node tools/build.js",
+    "postbuild": "babel-node tools/distServer.js"
+  },
+  "author": "Cory House",
+  "license": "MIT",
+  "dependencies": {
+    "babel-polyfill": "6.8.0",
+    "bootstrap": "3.3.6",
+    "jquery": "2.2.3",
+    "react": "15.0.2",
+    "react-dom": "15.0.2",
+    "react-redux": "4.4.5",
+    "react-router": "2.4.0",
+    "react-router-redux": "4.0.4",
+    "redux": "3.5.2",
+    "redux-thunk": "2.0.1",
+    "toastr": "2.1.2"
+  },
+  "devDependencies": {
+    "babel-cli": "6.8.0",
+    "babel-core": "6.8.0",
+    "babel-loader": "6.2.4",
+    "babel-plugin-react-display-name": "2.0.0",
+    "babel-preset-es2015": "6.6.0",
+    "babel-preset-react": "6.5.0",
+    "babel-preset-react-hmre": "1.1.1",
+    "babel-register": "6.8.0",
+    "colors": "1.1.2",
+    "compression": "^1.6.1",
+    "cross-env": "1.0.7",
+    "css-loader": "0.23.1",
+    "enzyme": "2.2.0",
+    "eslint": "2.9.0",
+    "eslint-plugin-import": "1.6.1",
+    "eslint-plugin-react": "5.0.1",
+    "eslint-watch": "2.1.11",
+    "eventsource-polyfill": "0.9.6",
+    "expect": "1.19.0",
+    "express": "4.13.4",
+    "extract-text-webpack-plugin": "1.0.1",
+    "file-loader": "0.8.5",
+    "jsdom": "8.5.0",
+    "mocha": "2.4.5",
+    "nock": "8.0.0",
+    "npm-run-all": "1.8.0",
+    "open": "0.0.5",
+    "react-addons-test-utils": "15.0.2",
+    "redux-immutable-state-invariant": "1.2.3",
+    "redux-mock-store": "1.0.2",
+    "rimraf": "2.5.2",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "1.13.0",
+    "webpack-dev-middleware": "1.6.1",
+    "webpack-hot-middleware": "2.10.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
+  }
+}

src/index.js

@@ -0,0 +1 @@
+console.log('Hello world!');