Merge pull request #55 from barbar/develop

Version 0.1
barbar · Jun 10, 2016 · 4710787 · 4710787
2 parents 2ad683d + eb0def7
commit 4710787
Show file tree

Hide file tree

Showing 32 changed files with 428 additions and 361 deletions.
diff --git a/Makefile b/Makefile
diff --git a/README.md b/README.md
@@ -22,36 +22,37 @@ Vortigern uses the following libraries and tools:
 - [React-Router-Redux](https://github.com/reactjs/react-router-redux) to keep application state sync with route changes.
 
 #### Utilities
-- [classnames](https://github.com/JedWatson/classnames)
-- [Redux Thunk](https://github.com/gaearon/redux-thunk) for dispatching async actions.
 - [Isomorphic Fetch](https://github.com/matthew-andrews/isomorphic-fetch) with [ES6-Promise](https://github.com/stefanpenner/es6-promise) for using fetch api on both client & server side.
+- [Redux Thunk](https://github.com/gaearon/redux-thunk) for dispatching async actions.
+- [Redux Connect](https://github.com/makeomatic/redux-connect) for resolving async props in react-router.
 - [React Helmet](https://github.com/nfl/react-helmet)
+- [classnames](https://github.com/JedWatson/classnames)
 
 #### Build System
 - [Webpack](https://github.com/webpack/webpack) for bundling.
-	- [TypeScript Loader](https://github.com/andreypopp/typescript-loader) as ts loader.
-	- [Babel Loader](https://github.com/babel/babel-loader) as js loader.
-	- [React Hot Loader](https://github.com/gaearon/react-hot-loader) for providing hot reload capability to our development server
-	- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader) for loading styles on server-side.
-	- [Style Loader](https://github.com/webpack/style-loader)
-	- [CSS Loader](https://github.com/webpack/css-loader)
-	- [PostCSS Loader](https://github.com/postcss/postcss)
-		- [Autoprefixer](https://github.com/postcss/autoprefixer)
-		- [PreCSS](https://github.com/jonathantneal/precss)
-		- [PostCSS Assets](https://github.com/assetsjs/postcss-assets)
-	- [JSON Loader](https://github.com/webpack/json-loader)
-	- [File Loader](https://github.com/webpack/file-loader) & [URL Loader](https://github.com/webpack/url-loader)
-	- [SourceMap Loader](https://github.com/webpack/source-map-loader)
-	- [Manifest Plugin](https://github.com/danethurber/webpack-manifest-plugin)
-	- [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin) for exporting bundled css. 
-	- [Tslint Loader](https://github.com/wbuchwalter/tslint-loader) for using tslint as preloader on build process.
-	- [Stylelint Loader](https://github.com/adrianhall/stylelint-loader) for using stylelint as preloader on build process.
-	- [Istanbul Instrumenter Loader](https://github.com/deepsweet/istanbul-instrumenter-loader) for using istanbul on postload process while generating code coverage reports.
+  - [TypeScript Loader](https://github.com/andreypopp/typescript-loader) as ts loader.
+  - [Babel Loader](https://github.com/babel/babel-loader) as js loader.
+  - [React Hot Loader](https://github.com/gaearon/react-hot-loader) for providing hot reload capability to our development server
+  - [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader) for loading styles on server-side.
+  - [Style Loader](https://github.com/webpack/style-loader)
+  - [CSS Loader](https://github.com/webpack/css-loader)
+  - [PostCSS Loader](https://github.com/postcss/postcss)
+    - [PostCSS cssnext](https://github.com/MoOx/postcss-cssnext)
+    - [PostCSS Assets](https://github.com/assetsjs/postcss-assets)
+  - [JSON Loader](https://github.com/webpack/json-loader)
+  - [File Loader](https://github.com/webpack/file-loader)
+  - [URL Loader](https://github.com/webpack/url-loader)
+  - [Sourcemap Loader](https://github.com/webpack/source-map-loader)
+  - [Manifest Plugin](https://github.com/danethurber/webpack-manifest-plugin)
+  - [Extract Text Plugin](https://github.com/webpack/extract-text-webpack-plugin) for exporting bundled css. 
+  - [tslint Loader](https://github.com/wbuchwalter/tslint-loader) for using tslint as preloader on build process.
+  - [stylelint Loader](https://github.com/adrianhall/stylelint-loader) for using stylelint as preloader on build process.
+  - [Istanbul Instrumenter Loader](https://github.com/deepsweet/istanbul-instrumenter-loader) for using istanbul on postload process while generating code coverage reports.
 
 #### Dev & Prod Server
 - [Webpack Dev Server](https://github.com/webpack/webpack-dev-server)
-	- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware)
-	- [Webpack Hot Middleware](https://github.com/webpack/webpack-hot-middleware)
+  - [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware)
+  - [Webpack Hot Middleware](https://github.com/webpack/webpack-hot-middleware)
 - [Express](https://github.com/expressjs/express) for running server both on client and server side.
 - [Compression](https://github.com/expressjs/compression) for gzip compression
 - [Serve Favicon](https://github.com/expressjs/serve-favicon) for serving favicon.
@@ -65,11 +66,17 @@ Vortigern uses the following libraries and tools:
 - [Chalk](https://github.com/chalk/chalk) for colored terminal logs.
 
 #### Testing
-- [Karma](https://github.com/karma-runner/karma) as test runner.
+- [Karma](https://github.com/karma-runner/karma) as test runner with following plugins
+  - [Karma-Webpack](https://github.com/webpack/karma-webpack)
+  - [Karma-Mocha](https://github.com/karma-runner/karma-mocha)
+  - [Karma-Chai](https://github.com/xdissent/karma-chai)
+  - [Karma-Coverage](https://github.com/karma-runner/karma-coverage)
+  - [Karma-PhantomJS Launcher](https://github.com/karma-runner/karma-phantomjs-launcher)
 - [Mocha](https://github.com/mochajs/mocha) as testing framework.
 - [Chai](https://github.com/chaijs/chai) as assertion library.
 - [Enzyme](https://github.com/jquery/jquery) for rendering React Components.
-- [Karma-Webpack](https://github.com/webpack/karma-webpack), [Karma-Mocha](https://github.com/karma-runner/karma-mocha), [Karma-Chai](https://github.com/xdissent/karma-chai), [Karma-Coverage](https://github.com/karma-runner/karma-coverage), [Karma-PhantomJS Launcher](https://github.com/karma-runner/karma-phantomjs-launcher) as Karma plugins.
+- [Fetch Mock](https://github.com/wheresrhys/fetch-mock) for testing async actions.
+- [Redux Mock Store](https://github.com/arnaudbenard/redux-mock-store) for creating mock stores.
 
 ## Folder Structure
 ```bash
@@ -99,9 +106,8 @@ Vortigern uses the following libraries and tools:
 ├── .stylelintrc                # Configures stylelint.
 ├── Dockerfile                  # Dockerfile.
 ├── favicon.ico                 # Favicon.
-├── Makefile                    # Makefile.
 ├── package.json                # Package configuration.
-├── README.md                   # Readme.
+├── README.md                   # This file
 ├── tsconfig.json               # TypeScript transpiler configuration.
 ├── tslint.json                 # Configures tslint.
 └── typings.json                # Typings package configuration.
@@ -111,27 +117,36 @@ Vortigern uses the following libraries and tools:
 ```bash
 $ git clone https://github.com/barbar/vortigern
 $ cd vortigern
-$ npm run setup
+$ npm install
 ```
 
 ## Usage
 
-All commands defaults to development environment.
+All commands defaults to development environment. You can set `NODE_ENV` to `production` or use the shortcuts below.
 
 ```bash
-# Running the app on development mode
-$ npm start
+# Running
 
-# Building for production
-$ npm run build:prod
+$ npm start # This starts the app in development mode
 
-# Running app on production mode
+# Starting it with the production build
+$ NODE_ENV=production npm start # or
 $ npm run start:prod
 
-# Running unit tests
-$ npm run test
+# Building 
+
+$ npm build # This builds the app in development mode
+
+# Commands below builds the production build
+$ NODE_ENV=production npm build # or
+$ npm run build:prod
+
+# Testing
+$ npm test
 ```
 
+For Windows users, we recommend using the shortcuts instead of setting environment variables because they work a little different on Windows.
+
 ## Notes
 ```bash
 # If you want install additional libraries, you can also install their typings from DefinitelyTyped
@@ -140,6 +155,7 @@ $ typings install dt~<package> --global --save
 $ typings install <package> --save
 ```
 
-## Credits
+## Legal
 
-The photo in this readme belongs to [hhvferry.com](http://www.hhvferry.com/vortscrap.html).
+Vortigern is released under the MIT license. 
+The image in this README belongs to [hhvferry.com](http://www.hhvferry.com/vortscrap.html).
diff --git a/config/test/karma.conf.js b/config/test/karma.conf.js
@@ -1,7 +1,7 @@
+var path = require('path');
 var webpack = require('webpack');
-var autoprefixer = require('autoprefixer');
-var precss = require('precss');
 var postcssAssets = require('postcss-assets');
+var postcssNext = require('postcss-cssnext');
 var appConfig = require('../main');
 
 module.exports = function (config) {
@@ -43,10 +43,16 @@ module.exports = function (config) {
     webpack: {
       devtool: 'inline-source-map',
 
-      module: {
-        noParse: [
-          /node_modules\/sinon\//
+      resolve: {
+        root: path.resolve(__dirname),
+        modulesDirectories: [
+          '../../src',
+          'node_modules'
         ],
+        extensions: ['', '.json', '.js', '.ts', '.tsx', '.jsx']
+      },
+
+      module: {
         loaders: [
           {
             test: /\.tsx?$/,
@@ -62,7 +68,7 @@ module.exports = function (config) {
           },
           {
             test: /\.css$/,
-            include: /src\/app/,
+            include: path.resolve('./src/app'),
             loaders: [
               'style',
               'css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]',
@@ -71,41 +77,26 @@ module.exports = function (config) {
           },
           {
             test: /\.css$/,
-            exclude: /src\/app/,
+            exclude: path.resolve('./src/app'),
             loader: 'style!css'
           }
         ],
         postLoaders: [
           {
             test: /\.tsx?$/,
             loader: 'istanbul-instrumenter-loader',
-            include: /src\/app/,
-            exclude: [
-              /node_modules/
-            ]
+            include: path.resolve('./src/app')
           }
         ]
       },
 
       postcss: function () {
         return [
-          precss,
-          autoprefixer({ browsers: ['last 2 versions'] }),
+          postcssNext(),
           postcssAssets({ relative: true })
         ];
       },
 
-      resolve: {
-        alias: {
-          sinon: 'sinon/pkg/sinon'
-        },
-        modulesDirectories: [
-          '../../src',
-          'node_modules'
-        ],
-        extensions: ['', '.json', '.js', '.ts', '.tsx', '.jsx']
-      },
-
       externals: {
         'react/lib/ExecutionEnvironment': true,
         'react/lib/ReactContext': 'window'

diff --git a/config/webpack/dev.js b/config/webpack/dev.js
@@ -1,8 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
-var autoprefixer = require('autoprefixer');
-var precss = require('precss');
 var postcssAssets = require('postcss-assets');
+var postcssNext = require('postcss-cssnext');
 var stylelint = require('stylelint');
 var ManifestPlugin = require('webpack-manifest-plugin');
 
@@ -12,13 +11,15 @@ var config = {
   debug: true,
 
   resolve: {
+    root: path.resolve(__dirname),
     extensions: ['', '.ts', '.tsx', '.js', '.jsx']
   },
 
   entry: {
     app: [
       'webpack-hot-middleware/client?reload=true',
-      './src/client.tsx'
+      './src/client.tsx',
+      './src/vendor/main.ts'
     ]
   },
 
@@ -51,17 +52,20 @@ var config = {
       },
       {
         test: /\.css$/,
-        include: /src\/app/,
+        include: path.resolve('./src/app'),
         loaders: [
-          'style',
-          'css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]',
-          'postcss'
+          'style-loader',
+          'css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]',
+          'postcss-loader'
         ]
       },
       {
         test: /\.css$/,
-        exclude: /src\/app/,
-        loader: 'style!css'
+        exclude: path.resolve('./src/app'),
+        loaders: [
+          'style-loader',
+          'css-loader'
+        ]
       },
       {
         test: /\.eot(\?.*)?$/,
@@ -85,12 +89,10 @@ var config = {
       }
     ]
   },
-
   postcss: function () {
     return [
       stylelint({ files: '../../src/app/*.css' }),
-      precss,
-      autoprefixer({ browsers: ['last 2 versions'] }),
+      postcssNext(),
       postcssAssets({ relative: true })
     ];
   },

diff --git a/config/webpack/index.js b/config/webpack/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./prod');
+} else {
+  module.exports = require('./dev');
+}