WhiteStormJS - React/Redux - three.js - TypeScript boilerplate
WhiteStorm TypeScript Boilerplate is a starter kit for crafting 3D applications using modern technologies:
Video
Dynamic updates - Redux
Libraries
This starter kit also uses the following libraries and tools:
Core
- React DOM for views.
- React Router to handle in-app routing.
- React-Redux to use React-Redux bindings.
- React-Router-Redux to keep application state sync with route changes.
Utilities
- Redux Thunk for dispatching async actions.
- Redux Connect for resolving async props in react-router.
- React Helmet
- classnames
Build System
- Webpack for bundling.
- Awesome TypeScript Loader as ts loader.
- Babel Loader as js loader.
- React Hot Loader for providing hot reload capability to our development server
- 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.
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
- Jest for unit testing.
- Fetch Mock for testing async actions.
- Redux Mock Store for creating mock stores.
Directory Structure
.
├── build # Built, ready to serve app.
├── config # Root folder for 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.
│ ├── index.html # root page template
│ └── server.tsx # Entry point for server of static content.
├── typings # Type definitions installed with typings.
├── .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.
$ git clone https://github.com/whitestormJS/whitestorm-typescript-boilerplate
$ cd whitestorm-typescript-boilerplate
$ 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 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 testNotes
# 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-dev