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
- classnames
- Redux Thunk for dispatching async actions.
- Isomorphic Fetch with ES6-Promise for using fetch api on both client & server side.
- React Helmet
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
- 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
- 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.
- Mocha as testing framework.
- Chai as assertion library.
- Enzyme for rendering React Components.
- Karma-Webpack, Karma-Mocha, Karma-Chai, Karma-Coverage, Karma-PhantomJS Launcher as Karma plugins.
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 installUsage
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 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 build:prod
# Testing
$ npm testSmall thing to note for Windows users, you'll need set the environment with adding set to the beginning of the command like set NODE_ENV=production npm start for starting and set NODE_ENV=production npm build for building. Shortcuts doesn't need any changes.
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> --saveCredits
The photo in this readme belongs to hhvferry.com.