Merge pull request #20 from baoduy/develop

finished the unit test for MessageBox and Notification

.circleci/config.yml

@@ -27,14 +27,18 @@ jobs:
           - v1-dependencies-
 
       - run: npm install
+      - run: npm install codecov
 
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
-      - run: npm build
+      # Build
+      - run: npm run build
+      # lint
+      - run: npm run lint
       # run tests!
-      #- run: npm test
+      - run: npm run test-ci
 
 

.vscode/settings.json

@@ -58,10 +58,6 @@
   "explorer.confirmDragAndDrop": true,
   "git.autofetch": true,
   "javascript.implicitProjectConfig.experimentalDecorators": true,
-  "cSpell.words": [
-    "linebreak",
-    "mimetype",
-    "scrollbar",
-    "woff"
-  ]
+  "cSpell.words": ["linebreak", "mimetype", "scrollbar", "woff"],
+  "files.eol": "\n"
 }

README.md

@@ -1,5 +1,8 @@
 # React Webpack Babel Starter
 
+[![CircleCI](https://circleci.com/gh/baoduy/React-MaterialUI-Started-Kit.svg?style=svg)](https://circleci.com/gh/baoduy/React-MaterialUI-Started-Kit)
+[![codecov](https://codecov.io/gh/baoduy/React-MaterialUI-Started-Kit/branch/develop/graph/badge.svg)](https://codecov.io/gh/baoduy/React-MaterialUI-Started-Kit)
+
 Minimal starter kit with hot module replacement (HMR) for rapid development.
 
 - **[React](https://facebook.github.io/react/)** (16.x)
@@ -15,12 +18,15 @@ Minimal starter kit with hot module replacement (HMR) for rapid development.
 - **[Redux-toolbelt](https://github.com/welldone-software/redux-toolbelt)** A set of tools for quicker, easier, less verbose and safer Redux development by [welldone-software](http://welldone-software.com/).
 - ESLINT for Javascript and ReactJs
 - JSHINT standard configuration.
+- This project also using **babel-runtime** and **babel-plugin-transform-runtime** to speperate the commonns functions to the other module so the size of the file will be reduced. For details please refer [here](babel-plugin-transform-runtime)
 
 * Convert CSS to LESS: http://kronus.me/cn/css2less/
 
 # Original Source Code
 
-The source had been clone from [vikpe/react-webpack-babel-starter](https://github.com/vikpe/react-webpack-babel-starter) and on top of that I added some useful packages includes the Finished the [Material-Dashboard-React](https://github.com/creativetimofficial/material-dashboard-react) and Redux integration
+Based on the best practises of the Single-Page-Application development with NodeJS. I added the nice font-end component [Material-Dashboard-React](https://github.com/creativetimofficial/material-dashboard-react) and Redux store integration.
+
+Beside of that I also developped some useful compoment as Message box, Notification to make the Started-kit to be a **Production ready** SPA.
 
 # Support Features
 
@@ -52,10 +58,8 @@ async function getDataFromServer() {
 
 1.  Clone/download repo
 2.  `npm install`
-
-## New Compoments
-
-1.  **Message Box and Notification**: Allow to show Info, Confirm, Success and Error message and notification. Refer to the MessageBox in Views folder so sample that using Redux store to manage the state.
+3.  Replace the CodeCov.io token to your one in the `package.json` file.
+4.  Run `npm start` to run the project.
 
 ## Usage
 
@@ -75,6 +79,10 @@ async function getDataFromServer() {
 
 ---
 
+## New Compoments
+
+1.  **Message Box and Notification**: Allow to show Info, Confirm, Success and Error message and notification. Refer to the MessageBox in Views folder so sample that using Redux store to manage the state.
+
 ### Docker Support
 
 1.  Build Image `docker build`.
@@ -88,6 +96,8 @@ The image can be found in Docker hub [here](https://hub.docker.com/r/baoduy2412/
 
 **If you are using Docker the `Docker` folder in this project can be deleted without any impact.**
 
+---
+
 ### IIS Support
 
 The `Web.config` file had been added for IIS hosting purpose. When build the application this file will be copied to dist folder automatically and make the package ready for IIS.
@@ -104,7 +114,11 @@ When build the Service Fabric application it will copy all files in `dist` folde
 
 Defiantly, If you are not using **Azure Service Fabric**. This folder shall be deleted.
 
-> **Please note that the Gzip and SSL (HTTPS) had been enabled for all above**
+### GZIP and SSL
+
+The **GZIP** and **SSL** had been applied for all hosting environments above.
+
+---
 
 ### All commands
 
@@ -118,6 +132,7 @@ Defiantly, If you are not using **Azure Service Fabric**. This folder shall be d
 | `npm run lint:js`    | Run JavaScript linter                                                    |
 | `npm run lint:less`  | Run LESS linter                                                          |
 | `npm run start`      | (alias of `npm run start-dev`)                                           |
+| `npm rum test-ci`    | Run Jest test and upload code to CodeCov.io                              |
 
 ## See also
 

configs/webpack/common.js

@@ -1,7 +1,5 @@
 // shared config (dev and prod)
-const {
-  resolve
-} = require("path");
+const { resolve } = require("path");
 
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const webpack = require("webpack");
@@ -12,7 +10,8 @@ module.exports = {
   },
   context: resolve(__dirname, "../../src"),
   module: {
-    rules: [{
+    rules: [
+      {
         test: /\.(js|jsx)$/,
         use: {
           loader: "babel-loader"
@@ -33,19 +32,22 @@ module.exports = {
         ]
       },
       {
-        rules: [{
-          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
-            }
-          ]
-        }]
+        rules: [
+          {
+            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
+              }
+            ]
+          }
+        ]
       },
       {
         test: /\.(jpe?g|png|gif)$/i,
@@ -89,9 +91,15 @@ module.exports = {
   ],
   externals: {
     React: "react",
-    ReactDOM: "react-dom"
+    ReactDOM: "react-dom",
+    jsdom: "window",
+    "react/addons": true,
+    "react/lib/ExecutionEnvironment": true,
+    "react/lib/ReactContext": "window",
+    "react-dom/test-utils": true,
+    "react-test-renderer/shallow": true
   },
   performance: {
     hints: false
   }
-};
+};

configs/webpack/dev.js

@@ -12,7 +12,6 @@ module.exports = merge(commonConfig, {
     "react-hot-loader/patch", // activate HMR for React
     `webpack-dev-server/client?${url}`, // bundle the client for webpack-dev-server and connect to the provided endpoint
     "webpack/hot/only-dev-server", // bundle the client for hot reloading, only- means to only hot reload for successful updates
-    "babel-regenerator-runtime",
     "./index.jsx" // the entry point of our app
   ],
   devServer: {

configs/webpack/prod.js

@@ -1,22 +1,17 @@
 // production config
 const merge = require("webpack-merge");
-const {
-  resolve
-} = require("path");
+const { resolve } = require("path");
 
 const commonConfig = require("./common");
 
 module.exports = merge(commonConfig, {
   mode: "production",
-  entry: [
-    "babel-regenerator-runtime",
-    "./index.jsx"
-  ],
+  entry: ["./index.jsx"],
   //devtool: "source-map", // source map for testing only so disable it in PRD
   output: {
     filename: "js/bundle.min.js",
     path: resolve(__dirname, "../../dist"),
     publicPath: "/"
   },
   plugins: []
-});
+});