add react-express-mysql application sample

Signed-off-by: Anca Iordache <anca.iordache@docker.com>

samples/react-express-mysql/backend/Dockerfile

@@ -0,0 +1,36 @@
+# if you're doing anything beyond your local machine, please pin this to a specific version at https://hub.docker.com/_/node/
+FROM node:10
+
+RUN mkdir -p /opt/app
+
+# set our node environment, either development or production
+# defaults to production, compose overrides this to development on build and run
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
+
+# default to port 80 for node, and 9229 and 9230 (tests) for debug
+ARG PORT=80
+ENV PORT $PORT
+EXPOSE $PORT 9229 9230
+
+# you'll likely want the latest npm, reguardless of node version, for speed and fixes
+RUN npm i npm@latest -g
+
+# install dependencies first, in a different location for easier app bind mounting for local development
+WORKDIR /opt
+COPY package.json package-lock.json* ./
+RUN npm install && npm cache clean --force
+ENV PATH /opt/node_modules/.bin:$PATH
+
+# check every 30s to ensure this service returns HTTP 200
+HEALTHCHECK --interval=30s CMD node healthcheck.js
+
+# copy in our source code last, as it changes the most
+WORKDIR /opt/app
+COPY . /opt/app
+
+# if you want to use npm start instead, then use `docker run --init in production`
+# so that signals are passed properly. Note the code in index.js is needed to catch Docker signals
+# using node here is still more graceful stopping then npm with --init afaik
+# I still can't come up with a good production way to run with npm and graceful shutdown
+CMD [ "node", "index.js" ]

samples/react-express-mysql/backend/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2015-2017 Bret Fisher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

samples/react-express-mysql/backend/README.md

@@ -0,0 +1,86 @@
+## Node + Docker Hello World, for Showing Good Defaults for Using Node.js in Docker
+
+> This tries to be a "good defaults" example of using Node.js in Docker for local development and shipping to production with all the bells, whistles, and best practices. Issues/PR welcome.
+
+### Local Development Features
+
+ - **Dev as close to prod as you can**. docker-compose builds a local development image that is just like production image except for the below dev-only features needed in image. Goal is to have dev env be as close to test and prod as possible while still giving all the nice tools to make you a happy dev.
+ - **Prevent needing node/npm on host**. Installs `node_modules` outside app root in container so local development won't run into a problem of bind-mounting over it with local source code. This means it will run `npm install` once on container build and you don't need to run npm on host or on each docker run. It will re-run on build if you change `package.json`.
+ - **One line startup**. Uses `docker-compose up` for single-line build and run of local development server.
+ - **Edit locally while code runs in container**. docker-compose uses proper bind-mounts of host source code into container so you can edit locally while running code in Linux container.
+ - **Use nodemon in container**. docker-compose uses nodemon for development for auto-restarting node in container when you change files on host.
+ - **Enable debug from host to container**. opens the inspect port 9229 for using host-based debugging like chrome tools or VS Code. Nodemon enables `--inspect` by default in docker-compose.
+ - **Provides VSCode debug configs and tasks for tests**. for Visual Studio Code fans, `.vscode` directory has the goods, thanks to @JPLemelin.
+ - **Small image and quick re-builds**. `COPY` in `package.json` and run `npm install` **before** `COPY` in your source code. This saves big on build time and keep container lean.
+ - **Bind-mount package.json**. This allows adding packages in realtime without rebuilding images. e.g. `dce node npm install --save <package name>`
+
+
+### Production-minded Features
+
+ - **Use Docker build-in healthchecks**. uses Dockerfile `HEALTHCHECK` with `/healthz` route to help Docker know if your container is running properly (example always returns 200, but you get the idea).
+ - **Proper NODE_ENV use**. Defaults to `NODE_ENV=production` in Dockerfile and overrides to `development` in docker-compose for local dev.
+ - **Don't add dev dependencies into production image**. Proper `NODE_ENV` use means dev dependencies won't be installed in container by default. Using docker-compose will build with them by default.
+ - **Enables proper SIGTERM/SIGINT for graceful exit**. Defaults to `node index.js` rather then npm for allowing graceful shutdown of node. npm doesn't pass SIGTERM/SIGINT properly (you can't ctrl-c when running `docker run` in foreground). To get `node index.js` to graceful exit, extra signal-catching code is needed. The `Dockerfile` and `index.js` document the options and links to known issues.
+ - **Use docker-stack.yml example for Docker Swarm deployments**.
+
+
+### Assumptions
+
+ - You have Docker and Docker-Compose installed (Docker for Mac, Docker for Windows, get.docker.com and manual Compose installed for Linux).
+ - You want to use Docker for local development (i.e. never need to install node/npm on host) and have dev and prod Docker images be as close as possible.
+ - You don't want to loose fidelity in your dev workflow. You want a easy environment setup, using local editors, node debug/inspect, local code repo, while node server runs in a container.
+ - You use `docker-compose` for local development only (docker-compose was never intended to be a production deployment tool anyway).
+ - The `docker-compose.yml` is not meant for `docker stack deploy` in Docker Swarm, it's meant for happy local development. Use `docker-stack.yml` for Swarm.
+
+ 
+### Getting Started
+
+If this was your Node.js app, to start local development you would:
+
+ - Running `docker-compose up` is all you need. It will:
+ - Build custom local image enabled for development (nodemon, `NODE_ENV=development`).
+ - Start container from that image with ports 80 and 9229 open (on localhost).
+ - Starts with `nodemon` to restart node on file change in host pwd.
+ - Mounts the pwd to the app dir in container.
+ - If you need other services like databases, just add to compose file and they'll be added to the custom Docker network for this app on `up`.
+ - Compose should detect if you need to rebuild due to changed package.json or Dockerfile, but `docker-compose build` works for manually building.
+ - Be sure to use `docker-compose down` to cleanup after your done dev'ing.
+
+If you wanted to add a package while docker-compose was running your app:
+ - `docker-compose exec node npm install --save <package name>`
+ - This installs it inside the running container.
+ - Nodemon will detect the change and restart.
+ - `--save` will add it to the package.json for next `docker-compose build`
+
+To execute the unit-tests, you would:
+ - Execute `docker-compose exec node npm test`, It will:
+ - Run a process `npm test` in the container node.
+ - You can use the *vscode* to debug unit-tests with config `Docker Test (Attach 9230 --inspect)`, It will:
+   - Start a debugging process in the container and wait-for-debugger, this is done by *vscode tasks*
+   - It will also kill previous debugging process if existing.
+
+### Other Resources
+
+ - https://blog.hasura.io/an-exhaustive-guide-to-writing-dockerfiles-for-node-js-web-apps-bbee6bd2f3c4
+
+MIT License, 
+
+Copyright (c) 2015-2018 Bret Fisher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

samples/react-express-mysql/backend/healthcheck.js

@@ -0,0 +1,21 @@
+var http = require("http");
+
+var options = {
+  timeout: 2000,
+  host: 'localhost',
+  port: process.env.PORT || 8080,
+  path: '/healthz' // must be the same as HEALTHCHECK in Dockerfile
+};
+
+var request = http.request(options, (res) => {
+  console.info('STATUS: ' + res.statusCode);
+  process.exitCode = (res.statusCode === 200) ? 0 : 1;
+  process.exit();
+});
+
+request.on('error', function(err) {
+  console.error('ERROR', err);
+  process.exit(1);
+});
+
+request.end();

samples/react-express-mysql/backend/index.js

@@ -0,0 +1,78 @@
+// simple node web server that displays hello world
+// optimized for Docker image
+
+var express = require('express');
+// this example uses express web framework so we know what longer build times
+// do and how Dockerfile layer ordering matters. If you mess up Dockerfile ordering
+// you'll see long build times on every code change + build. If done correctly,
+// code changes should be only a few seconds to build locally due to build cache.
+
+var morgan = require('morgan');
+// morgan provides easy logging for express, and by default it logs to stdout
+// which is a best practice in Docker. Friends don't let friends code their apps to
+// do app logging to files in containers.
+
+// Constants
+const PORT = process.env.PORT || 8080;
+// if you're not using docker-compose for local development, this will default to 8080
+// to prevent non-root permission problems with 80. Dockerfile is set to make this 80
+// because containers don't have that issue :)
+
+// Appi
+var app = express();
+
+app.use(morgan('common'));
+
+app.get('/', function (req, res) {
+  res.send('Hello Docker World\n');
+});
+
+app.get('/healthz', function (req, res) {
+	// do app logic here to determine if app is truly healthy
+	// you should return 200 if healthy, and anything else will fail
+	// if you want, you should be able to restrict this to localhost (include ipv4 and ipv6)
+  res.send('I am happy and healthy\n');
+});
+
+var server = app.listen(PORT, function () {
+  console.log('Webserver is ready');
+});
+
+
+//
+// need this in docker container to properly exit since node doesn't handle SIGINT/SIGTERM
+// this also won't work on using npm start since:
+// https://github.com/npm/npm/issues/4603
+// https://github.com/npm/npm/pull/10868
+// https://github.com/RisingStack/kubernetes-graceful-shutdown-example/blob/master/src/index.js
+// if you want to use npm then start with `docker run --init` to help, but I still don't think it's
+// a graceful shutdown of node process
+//
+
+// quit on ctrl-c when running docker in terminal
+process.on('SIGINT', function onSigint () {
+	console.info('Got SIGINT (aka ctrl-c in docker). Graceful shutdown ', new Date().toISOString());
+  shutdown();
+});
+
+// quit properly on docker stop
+process.on('SIGTERM', function onSigterm () {
+  console.info('Got SIGTERM (docker container stop). Graceful shutdown ', new Date().toISOString());
+  shutdown();
+})
+
+// shut down server
+function shutdown() {
+  server.close(function onServerClosed (err) {
+    if (err) {
+      console.error(err);
+      process.exitCode = 1;
+		}
+		process.exit();
+  })
+}
+//
+// need above in docker container to properly exit
+//
+
+module.exports = app;

samples/react-express-mysql/backend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "node-docker-good-defaults",
+  "private": true,
+  "version": "2.0.0",
+  "description": "Node.js Hello world app using docker features for easy docker-compose local dev and solid production defaults",
+  "author": "Bret Fisher <bret@bretfisher.com>",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev-docker": "../node_modules/nodemon/bin/nodemon.js --debug=5858",
+    "dev-host": "nodemon --debug=5858",
+    "start-watch": "nodemon index.js --inspect=0.0.0.0:9229",
+    "start-wait-debuger": "nodemon index.js --inspect-brk=0.0.0.0:9229",
+    "test": "cross-env NODE_ENV=test PORT=8081 mocha --timeout 10000 --exit --inspect=0.0.0.0:9230",
+    "test-watch": "nodemon --exec \"npm test\"",
+    "test-wait-debuger": "cross-env NODE_ENV=test PORT=8081 mocha --no-timeouts --exit --inspect-brk=0.0.0.0:9230"
+  },
+  "dependencies": {
+    "express": "^4.16.3",
+    "morgan": "^1.8.1"
+  },
+  "devDependencies": {
+    "chai": "^4.1.2",
+    "chai-http": "^4.0.0",
+    "cross-env": "^5.1.4",
+    "mocha": "^5.0.5",
+    "nodemon": "^1.17.5"
+  }
+}

samples/react-express-mysql/backend/test/sample.js

@@ -0,0 +1,32 @@
+const app = require('../index');
+
+const chai = require('chai');
+const chaiHttp = require('chai-http');
+
+chai.use(chaiHttp);
+chai.should();
+
+describe('API /healthz', () => {
+    it('it should return 200', (done) => {
+        chai.request(app)
+            .get('/healthz')
+            .end((err, res) => {
+                res.should.have.status(200);
+                done();
+            });
+    });
+});
+
+describe('API /', () => {
+    it('it should return Welcome message', (done) => {
+        chai.request(app)
+            .get('/')
+            .end((err, res) => {
+                res.should.have.status(200);
+                res.should.to.be.html;
+                res.text.should.be.equal("Hello Docker World\n");
+                done();
+            });
+    });
+});
+

samples/react-express-mysql/db/password.txt

@@ -0,0 +1 @@
+db-btf5q

samples/react-express-mysql/docker-compose.yaml

@@ -0,0 +1,46 @@
+version: "3.7"
+services:
+  backend:
+    build:
+      args:
+      - NODE_ENV=development
+      context: backend
+    command: ../node_modules/.bin/nodemon --inspect=0.0.0.0:9229
+    environment:
+    - NODE_ENV=development
+    ports:
+    - 8080:80
+    - 9229:9229
+    - 9230:9230
+    volumes:
+    - ./backend:/opt/app:delegated
+    - ./backend/package.json:/opt/package.json
+    - ./backend/package-lock.json:/opt/package-lock.json
+    - back-notused:/opt/app/node_modules
+    depends_on: 
+      - db
+  db:
+    environment:
+      MYSQL_DATABASE: example
+      MYSQL_ROOT_PASSWORD_FILE: /run/secrets/db-password
+    image: mysql:5.7
+    restart: always
+    secrets:
+    - db-password
+    volumes:
+    - db-data:/var/lib/mysql
+  frontend:
+    build: frontend
+    ports:
+    - 80:9000
+    volumes:
+    - ./frontend:/project
+    - /project/node_modules
+    depends_on: 
+    - backend
+volumes:
+  back-notused: {}
+  db-data: {}
+secrets:
+  db-password:
+    file: db/password.txt

samples/react-express-mysql/frontend/.babelrc

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "loose": true,
+        "modules": false
+      }
+    ],
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "transform-runtime",
+    "transform-object-rest-spread",
+    "lodash"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+  }
+}

samples/react-express-mysql/frontend/.browserslistrc

@@ -0,0 +1,5 @@
+> 1%
+last 3 versions
+Firefox ESR
+Opera 12.1
+IE >= 10

samples/react-express-mysql/frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.happypack

samples/react-express-mysql/frontend/.eslintignore

@@ -0,0 +1 @@
+webpack/*

samples/react-express-mysql/frontend/.eslintrc

@@ -0,0 +1,36 @@
+{
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "env": {
+    "es6"     : true,
+    "browser" : true,
+    "node"    : true,
+    "jest"    : true
+  },
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules" : {
+    "no-eq-null" : 0,
+    "quotes": 0,
+    "eol-last": 0,
+    "semi": [2, "always"],
+    "key-spacing": [1, {"beforeColon": true, "afterColon": true, "mode": "minimum", "align": "colon"}],
+    "padded-blocks": [1, { "switches": "never", "classes" : "always"}],
+    "space-before-function-paren": ["error", "never"],
+    "indent": [1, 4]
+  },
+  "globals" : {
+    "__DEV__"        : false,
+    "__filename"     : false,
+    "__dirname"      : false
+  }
+}

samples/react-express-mysql/frontend/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.happypack
+build/*
+dist/*

samples/react-express-mysql/frontend/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:10
+
+RUN mkdir /project
+WORKDIR /project
+
+COPY . .
+
+RUN yarn install
+CMD ["yarn", "run", "start"]

samples/react-express-mysql/frontend/Dockerfile.production

@@ -0,0 +1,12 @@
+FROM node:10 as build
+
+RUN mkdir /project
+WORKDIR /project
+COPY . .
+RUN yarn install
+RUN yarn run package
+
+FROM nginx:1.13-alpine
+
+COPY config/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /project/dist /usr/share/nginx/html

samples/react-express-mysql/frontend/README.md

@@ -0,0 +1 @@
+# Sample App

samples/react-express-mysql/frontend/config/nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen       9000;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+}

samples/react-express-mysql/frontend/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "moduleFileExtensions": [
+        "js",
+        "jsx",
+        "json"
+    ],
+    "moduleDirectories": [
+        "node_modules",
+        "src"
+    ],
+    "moduleNameMapper": {
+        "^.+\\.(css|scss)$": "<rootDir>/test/mocks/styleMock.js",
+        "^.+\\.(jpg|jpeg|gif|png|svg|eot|ttf|woff|woff2|)$": "<rootDir>/test/mocks/imageMock.js"
+    }
+};

samples/react-express-mysql/frontend/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "react-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf ./dist/* && rimraf ./build/*",
+    "start": "cross-env NODE_ENV=development node webpack/dev-server.js",
+    "build": "cross-env NODE_ENV=development webpack --config webpack.config.js",
+    "package": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "test": "cross-env NODE_ENV=test jest",
+    "lint:js": "eslint ./src"
+  },
+  "dependencies": {
+    "express": "4.16.3",
+    "axios": "0.18.0",
+    "classnames": "2.2.5",
+    "lodash": "4.17.5",
+    "moment": "2.20.0",
+    "history": "4.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^5.1.1",
+    "react-router-dom": "^4.3.1",
+    "react-router-redux": "5.0.0-alpha.8",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.6.5",
+    "redux-saga": "0.16.0",
+    "reselect": "3.0.1",
+    "query-string": "6.0.0"
+  },
+  "devDependencies": {
+    "rimraf": "2.6.1",
+    "cross-env": "5.1.4",
+    "webpack": "4.5.0",
+    "webpack-cli": "3.3.1",
+    "webpack-dev-server": "3.1.3",
+    "html-webpack-plugin": "3.2.0",
+    "mini-css-extract-plugin": "0.4.0",
+    "react-hot-loader": "3.1.3",
+    "node-sass": "^4.11.0",
+    "babel-core": "6.26.0",
+    "babel-runtime": "6.26.0",
+    "babel-loader": "7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-eslint": "8.2.2",
+    "babel-preset-react": "6.24.1",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-plugin-lodash": "3.3.2",
+    "css-loader": "^2.1.1",
+    "sass-loader": "6.0.7",
+    "style-loader": "0.20.3",
+    "file-loader": "1.1.11",
+    "postcss-loader": "2.1.3",
+    "autoprefixer": "8.2.0",
+    "cssnano": "4.1.10",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4",
+    "babel-jest": "20.0.3",
+    "eslint": "4.19.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-config-standard-react": "^5.0.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.1.1",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "7.1.0",
+    "eslint-plugin-jsx-a11y": "6.0.2",
+    "eslint-plugin-standard": "3.0.1"
+  }
+}

samples/react-express-mysql/frontend/src/app/app.jsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Switch } from "react-router-dom"
+import { renderRoutes } from "./routes"
+
+import { ApplicationContainer } from "app/components/layout"
+
+require("./core/styles/reset.css");
+require("./core/styles/normalize.scss");
+//require("./core/styles/main.scss");
+
+export class App extends React.Component {
+    render() {
+        return (
+            <ApplicationContainer>
+                <Switch>
+                    {renderRoutes()}
+                </Switch>
+            </ApplicationContainer>
+        )
+    }
+}
+

samples/react-express-mysql/frontend/src/app/components/layout/ApplicationContainer.jsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export default class ApplicationContainer extends React.Component {
+
+    render() {
+        return (
+            <div className="main-container">
+                <div className="main-content">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+
+}

samples/react-express-mysql/frontend/src/app/components/layout/index.js

@@ -0,0 +1,5 @@
+import ApplicationContainer from "./ApplicationContainer";
+
+export {
+    ApplicationContainer,
+}

samples/react-express-mysql/frontend/src/app/core/styles/normalize.scss

@@ -0,0 +1,396 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined in IE 8/9.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// Correct `inline-block` display not defined in IE 8/9.
+//
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+[hidden] {
+  display: none;
+}
+
+// ==========================================================================
+// Base
+// ==========================================================================
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -webkit-text-size-adjust: 100%; // 2
+  -ms-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+//
+// Address `outline` inconsistency between Chrome and other browsers.
+//
+
+a:focus {
+  outline: thin dotted;
+}
+
+//
+// Improve readability when focused and also mouse hovered in all browsers.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari 5 and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Correct font family set oddly in Safari 5 and Chrome.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+//
+// Improve readability of pre-formatted text in all browsers.
+//
+
+pre {
+  white-space: pre-wrap;
+}
+
+//
+// Set consistent quote types.
+//
+
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// ==========================================================================
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow displayed oddly in IE 9.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// ==========================================================================
+// Figures
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari 5.
+//
+
+figure {
+  margin: 0;
+}
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Correct font family not being inherited in all browsers.
+// 2. Correct font size not being inherited in all browsers.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+//
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; // 1
+  font-size: 100%; // 2
+  margin: 0; // 3
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+button,
+input {
+  line-height: normal;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+// Correct `select` style inheritance in Firefox 4+ and Opera.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// 1. Address box sizing set to `content-box` in IE 8/9.
+// 2. Remove excess padding in IE 8/9.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; // 2
+  box-sizing: content-box;
+}
+
+//
+// Remove inner padding and search cancel button in Safari 5 and Chrome
+// on OS X.
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// 1. Remove default vertical scrollbar in IE 8/9.
+// 2. Improve readability and alignment in all browsers.
+//
+
+textarea {
+  overflow: auto; // 1
+  vertical-align: top; // 2
+}
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

samples/react-express-mysql/frontend/src/app/core/styles/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

samples/react-express-mysql/frontend/src/app/entry.jsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { render, unmountComponentAtNode } from "react-dom"
+import { AppContainer } from "react-hot-loader"
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from "react-router-redux"
+import { createBrowserHistory } from "history"
+
+import { configureStore, sagaMiddleware } from "./store"
+import { runApplicationSagas } from "./sagas"
+
+const history = createBrowserHistory();
+const store = configureStore(history);
+
+const getAppContainer = () => document.getElementById('app-container');
+
+const renderApp = () => {
+    const App = require('./app').App;
+    render(
+        <AppContainer>
+            <Provider store={store}>
+                <ConnectedRouter history={history}>
+                    <App/>
+                </ConnectedRouter>
+            </Provider>
+        </AppContainer>
+        , getAppContainer());
+};
+
+if (__DEV__ && module.hot) {
+    const hotReloadApp = () => renderApp();
+    module.hot.accept('./app', () => {
+        // Preventing the hot reloading error from react-router
+        unmountComponentAtNode(getAppContainer());
+        hotReloadApp();
+    })
+}
+
+// runApplicationSagas(sagaMiddleware);
+renderApp();

samples/react-express-mysql/frontend/src/app/pages/home/HomePage.jsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+
+require("./home.scss");
+
+const mapStateToProps = (state, props) => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+class HomePage extends React.Component {
+
+    render() {
+        return (
+            <div className="home-page page">
+                <h1>My New React App</h1>
+            </div>
+        )
+    }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage)

samples/react-express-mysql/frontend/src/app/pages/home/home.scss

@@ -0,0 +1,6 @@
+
+
+.home-page {
+  background-color: blue;
+  color: red;
+}

samples/react-express-mysql/frontend/src/app/pages/home/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Route } from "react-router-dom";
+import HomePage from './HomePage';
+
+const route = <Route path="/" exact key="home" component={HomePage}/>;
+
+export default route;

samples/react-express-mysql/frontend/src/app/reducers.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+
+import whalesReducer from 'app/redux/whales';
+
+export const rootReducer = combineReducers({
+    router: routerReducer,
+
+    whales: whalesReducer,
+});

samples/react-express-mysql/frontend/src/app/redux/whales/action-creators.js

@@ -0,0 +1,4 @@
+import { createAction } from 'redux-actions';
+import * as ActionTypes from "./action-types";
+
+export const fetchWhales = createAction(ActionTypes.FETCH_WHALES);

samples/react-express-mysql/frontend/src/app/redux/whales/action-types.js

@@ -0,0 +1,4 @@
+
+const prefix = 'WHALES';
+
+export const FETCH_WHALES = `${prefix}/FETCH`;

samples/react-express-mysql/frontend/src/app/redux/whales/index.js

@@ -0,0 +1,3 @@
+import Reducer from './reducer';
+
+export default Reducer;

samples/react-express-mysql/frontend/src/app/redux/whales/reducer.js

@@ -0,0 +1,16 @@
+import * as ActionTypes from "./action-types";
+import { handleActions } from "redux-actions";
+
+const defaultState = {
+    list: [],
+};
+
+const handleFetchWhales = (state, {payload}) => {
+    return state;
+};
+
+const reducer = handleActions({
+    [ActionTypes.FETCH_WHALES] : handleFetchWhales
+}, defaultState);
+
+export default reducer;

samples/react-express-mysql/frontend/src/app/routes.jsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Home from "./pages/home"
+
+const routes = [
+    Home,
+];
+
+export const renderRoutes = () => {
+    return routes;
+};

samples/react-express-mysql/frontend/src/app/sagas.js

@@ -0,0 +1,9 @@
+//import { templatesSaga } from "./data/templates/sagas";
+//import { appWizardSaga } from "./data/app-wizard/sagas";
+
+const startupSagas = [
+];
+
+export const runApplicationSagas = (sagaMiddleware) => {
+    startupSagas.forEach(sagaMiddleware.run);
+};

samples/react-express-mysql/frontend/src/app/store.js

@@ -0,0 +1,37 @@
+import { routerMiddleware } from 'react-router-redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+import createSagaMiddleware from "redux-saga";
+import { rootReducer } from "./reducers";
+
+export const sagaMiddleware = createSagaMiddleware();
+
+export const configureStore = (history, initialState = {}) => {
+
+    const middlewares = [
+        routerMiddleware(history),
+        sagaMiddleware
+    ];
+
+    const enhancers = [
+        applyMiddleware(...middlewares),
+    ];
+
+    if(__DEV__) {
+        const devToolEnhancer = () => {
+            return typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
+                ? window.devToolsExtension() : f => f;
+        };
+        enhancers.push(devToolEnhancer())
+    }
+
+    const store = createStore(rootReducer, initialState, compose(...enhancers));
+
+    if(__DEV__ && module.hot) {
+        module.hot.accept('./reducers', () => {
+            const nextReducer = require('./reducers').default;
+            store.replaceReducer(nextReducer);
+        })
+    }
+
+    return store;
+};

samples/react-express-mysql/frontend/src/index.ejs

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample application</title>
+  </head>
+  <body>
+    <div id="app-container"></div>
+  </body>
+</html>

samples/react-express-mysql/frontend/src/test/mocks/imageMock.js

@@ -0,0 +1,3 @@
+// Return an empty string or other mock path to emulate the url that
+// Webpack provides via the file-loader
+module.exports = 'mocked-image.jpg';

samples/react-express-mysql/frontend/src/test/mocks/styleMock.js

@@ -0,0 +1,2 @@
+// Return a Proxy to emulate css modules (if you are using them)
+module.exports = require('identity-obj-proxy');

samples/react-express-mysql/frontend/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("./webpack/config-builder")(process.env.NODE_ENV || 'production');

samples/react-express-mysql/frontend/webpack/config-builder.js

@@ -0,0 +1,231 @@
+'use strict';
+
+const path = require('path'),
+    webpack = require('webpack'),
+    HtmlWebpackPlugin = require('html-webpack-plugin'),
+    MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const PROJECT_ROOT = path.resolve(__dirname, "..");
+
+module.exports = (env) => {
+    const isDev = env === 'development';
+    const isTest = env === 'test';
+    const isProd = !isDev && !isTest;
+
+    const getAppEntry = () => {
+        const appEntry = path.resolve(PROJECT_ROOT, "src/app/entry.jsx");
+        if(isDev) {
+            return [
+                'react-hot-loader/patch',
+                'webpack-dev-server/client?http://localhost:9000',
+                'webpack/hot/only-dev-server',
+                appEntry
+            ]
+        } else {
+            return [appEntry]
+        }
+    };
+
+    const getPlugins = () => {
+
+        // common plugins
+        let plugins = [
+            // Global variables
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(env),
+                '__DEV__': isDev,
+                '__PROD__': isProd,
+                '__TEST__': isTest,
+            }),
+            // ignore moment locale files
+            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+            // extract styles to css file
+            new MiniCssExtractPlugin({
+                filename: "[name].[contenthash].css",
+                chunkFilename: "[id].css",
+                disable: isDev,
+            }),
+            // makes index.html
+            new HtmlWebpackPlugin({
+                template: path.resolve(PROJECT_ROOT, 'src/index.ejs'),
+            })
+        ];
+
+        // development plugins
+        if(isDev) {
+            plugins.push(
+                // Hot Reload (HMR)
+                new webpack.HotModuleReplacementPlugin(),
+                // Named Modules
+                new webpack.NamedModulesPlugin()
+            );
+        }
+
+        // production plugins
+        if(isProd) {
+            plugins.push(
+                new webpack.optimize.ModuleConcatenationPlugin()
+            );
+        }
+
+        return plugins;
+    };
+
+    return {
+        target: 'web',
+        mode: isProd ? "production" : "development",
+        context: PROJECT_ROOT,
+
+        entry: {
+            app: getAppEntry()
+        },
+
+        output: {
+            path: path.resolve(PROJECT_ROOT, isProd ? 'dist' : 'build'),
+            filename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
+            publicPath: '/',
+            sourceMapFilename: '[file].map',
+            chunkFilename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
+            pathinfo: isDev
+
+        },
+
+        devtool: isProd ? "hidden-sourcemap" : 'eval',
+
+        resolve: {
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            modules: ["node_modules", "src"],
+            alias: {}
+        },
+
+        module: {
+            rules: [
+                // JS / JSX files
+                {
+                    test: /\.(js|jsx)$/,
+                    exclude: /(node_modules)/,
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                            options: {
+                                cacheDirectory: true
+                            }
+                        }
+                    ]
+                },
+                // SASS files
+                {
+                    test: /\.scss$/,
+                    exclude: /(node_modules|bower_components)/,
+                    use: [
+                        isDev ? "style-loader" : MiniCssExtractPlugin.loader,
+                        {
+                            loader: "css-loader",
+                            options: {
+                                importLoaders: 2,
+                                url: true,
+                                import: false,
+                                sourceMap: isDev
+                            }
+                        },
+                        {
+                            loader: "postcss-loader",
+                            options: {
+                                sourceMap: isDev,
+                                plugins: isDev ? [] : [
+                                    require("autoprefixer"),
+                                    require("cssnano")({
+                                        safe: true,
+                                        zindex: false,
+                                        discardComments: {
+                                            removeAll: true
+                                        }
+                                    })
+                                ]
+                            }
+                        },
+                        {
+                            loader: "sass-loader",
+                            options: {
+                                sourceMap: isDev,
+                                includePaths: [".", path.join(process.cwd(), "src/app/core/styles")]
+                            }
+                        }
+                    ]
+                },
+                // Plain CSS files
+                {
+                    test: /\.css$/,
+                    use: [
+                        isDev ? "style-loader" : MiniCssExtractPlugin.loader,
+                        {
+                            loader: "css-loader",
+                            options: {
+                                importLoaders: 1,
+                                url: true,
+                                import: false,
+                                sourceMap: isDev
+                            }
+                        },
+                        {
+                            loader: "postcss-loader",
+                            options: {
+                                sourceMap: isDev,
+                                plugins: isDev ? [] : [
+                                    require("autoprefixer"),
+                                    require("cssnano")({
+                                        safe: true,
+                                        zindex: false,
+                                        discardComments: {
+                                            removeAll: true
+                                        }
+                                    })
+                                ]
+                            }
+                        }
+                    ]
+                },
+                // images loader
+                {
+                    test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
+                    use: [
+                        {
+                            loader: 'file-loader',
+                            options: {
+                                name: "[name].[ext]",
+                                outputPath: isProd ? "../images/" : "images/"
+                            }
+                        }
+                    ]
+                },
+                // font loader
+                {
+                    test: /\.(woff|woff2|ttf|eot)(\?.*)?$/,
+                    use: [
+                        {
+                            loader: 'file-loader',
+                            options: {
+                                name: "[name].[ext]",
+                                publicPath: isProd ? "" : "/webpack/",
+                                useRelativePath: isProd,
+                                outputPath: isProd ? "../fonts/" : "fonts/"
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+
+        plugins: getPlugins(),
+
+        node: {
+            __filename: true,
+            __dirname: true,
+            fs: 'empty',
+            vm: 'empty',
+            net: 'empty',
+            tls: 'empty',
+        }
+
+    };
+};

samples/react-express-mysql/frontend/webpack/dev-server.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const webpack = require('webpack'),
+      WebpackDevServer = require('webpack-dev-server'),
+      makeConfig = require("./config-builder");
+
+const startWebpackServer = () => {
+    const config = makeConfig('development');
+
+    const SERVER_PORT = 9000;
+
+    new WebpackDevServer(webpack(config), {
+        publicPath          : config.output.publicPath,
+        hot                 : true,
+        historyApiFallback  : true,
+        contentBase         : "./build/",
+
+        watchOptions: { // no file events on D4W
+            aggregateTimeout: 300,
+            poll: 1000
+        },
+
+        proxy : {
+            "/api/*"       : "http://127.0.0.1:8080"  // proxy to backend
+        },
+
+        before : function(app) {
+            // manually configure app `app.use(...)`
+        }
+    }).listen(SERVER_PORT, '0.0.0.0', function (err, result) {
+        if (err) {
+            console.log(err);
+        }
+        console.log('Webpack dev server listening at localhost:' + SERVER_PORT);
+    });
+};
+
+startWebpackServer();