Vortigern

Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Redux.

Libraries

Vortigern uses the following libraries and tools:

Core

• TypeScript
• React & React DOM for views.
• React Router to handle in-app routing.
• Redux for managing application state.
• React-Redux to use React-Redux bindings.
• React-Router-Redux to keep application state sync with route changes.

Utilities

• Isomorphic Fetch with ES6-Promise for using fetch api on both client & server side.
• Redux Thunk for dispatching async actions.
• Redux Connect for resolving async props in react-router.
• React Helmet
• classnames

Build System

• Webpack for bundling.
• TypeScript Loader as ts loader.
• Babel Loader as js loader.
• React Hot Loader for providing hot reload capability to our development server
• Isomorphic Style Loader for loading styles on server-side.
• Style Loader
• CSS Loader
• PostCSS Loader
  • PostCSS cssnext
  • PostCSS Assets
• JSON Loader
• File Loader
• URL Loader
• Sourcemap Loader
• Manifest Plugin
• Extract Text Plugin for exporting bundled css.
• tslint Loader for using tslint as preloader on build process.
• stylelint Loader for using stylelint as preloader on build process.
• Istanbul Instrumenter Loader for using istanbul on postload process while generating code coverage reports.

Dev & Prod Server

• Webpack Dev Server
• Webpack Dev Middleware
• Webpack Hot Middleware
• Express for running server both on client and server side.
• Compression for gzip compression
• Serve Favicon for serving favicon.

Developer Experience

• Typings for installing type definitions of external libraries.
• tslint for linting TypeScript files.
• stylelint for linting styles.
• Redux Logger
• Redux DevTools
• Chalk for colored terminal logs.

Testing

• Karma as test runner with following plugins
• Karma-Webpack
• Karma-Mocha
• Karma-Chai
• Karma-Coverage
• Karma-PhantomJS Launcher
• Mocha as testing framework.
• Chai as assertion library.
• Enzyme for rendering React Components.
• Fetch Mock for testing async actions.
• Redux Mock Store for creating mock stores.

Folder Structure

.
├── build                       # Built, ready to serve app.
├── config                      # Root folder for configurations.
│   ├── test                    # Test configurations.
│   ├── types                   # Global type definitions, written by us.
│   ├── webpack                 # Webpack configurations.
│   └── main.ts                 # Generic App configurations.
├── node_modules                # Node Packages.
├── src                         # Source code.
│   ├── app                     # App folder.
│   │ ├── components            # React Components.
│   │ ├── containers            # React/Redux Containers.
│   │ ├── helpers               # Helper Functions & Components.
│   │ ├── redux                 # Redux related code aka data layer of the app.
│   │ │   ├── modules           # Redux modules.   
│   │ │   ├── reducers.ts       # Main reducers file to combine them.  
│   │ │   └── store.ts          # Redux store, contains global app state.    
│   │ └── routes.tsx            # Routes.
│   ├── client.tsx              # Entry point for client side rendering.
│   └── server.tsx              # Entry point for server side rendering.
├── typings                     # Type definitions installed with typings.              
├── .dockerignore               # Tells docker which files to ignore.
├── .gitignore                  # Tells git which files to ignore.
├── .stylelintrc                # Configures stylelint.
├── Dockerfile                  # Dockerfile.
├── favicon.ico                 # Favicon.
├── package.json                # Package configuration.
├── README.md                   # This file
├── tsconfig.json               # TypeScript transpiler configuration.
├── tslint.json                 # Configures tslint.
└── typings.json                # Typings package configuration.

Installation

$ git clone https://github.com/barbar/vortigern
$ cd vortigern
$ npm install

Usage

All commands defaults to development environment. You can set NODE_ENV to production or use the shortcuts below.

# Running

$ npm start # This starts the app in development mode

# Starting it with the production build
$ NODE_ENV=production npm start # or
$ npm run start:prod

# 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

# If you want install additional libraries, you can also install their typings from DefinitelyTyped
$ typings install dt~<package> --global --save
# or if it's located on npm
$ typings install <package> --save

Legal

Vortigern is released under the MIT license. The image in this README belongs to hhvferry.com.