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.

Directory Structure

.
├── blueprints                  # redux-cli file generation templates
├── 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 dumb, pure components.
│   │ ├── containers            # React/Redux Containers.
│   │ ├── helpers               # Helper Functions & Components.
│   │ ├── mocks                 # Mock Data for testing
│   │ ├── models                # Classes and interfaces to model your data.
│   │ ├── 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                # Routes.
│   │ └── views                 # Components that are loaded to by a route. 
│   ├── 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

You can clone from this repository or install the latest version as a zip file or a tarball.

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

Generating files from the blueprints

You can generate components, containers, redux modules (reducer), and views automatically using the https://github.com/SpencerCDixon/redux-cli.

Example:

$ npm install -g redux-cli@1.8.0 # released (and tested on) version as of this writing
$ redux g reducer example

Will generate a reducer file named example, and the necessary tests boilerplate.

Reducers

Reducers have been setup to automatically dispatch the action with the type. This removes the need for any const strings. See the current reducers for an example, or use the reducer blueprint.

I18n (Internationalization)

This starter kit is setup to handle language changes automatically.

To make the best use of i18n, keep all your strings in src/app/resources/strings/i18n/(language)/(language.json)

Code generation will occur while you are developing and generate types for you. You can access all strings from the rootstore.i18n.strings, which should be setup by the blueprints automatically.

Adding language auto detection is on the roadmap.

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

Credits

Vortigern is released under the MIT license.

The image in this README belongs to hhvferry.com.

---

Barbar Startup Factory

We help startups start and stay started by helping them plan, strategize, fund and execute their vision.

You can contact us at hey@barbar.com.tr

Be sure to check out available jobs at Barbar.