This package has been deprecated

Author message:

this package has been deprecated

aspireiq-widgets

Revfluence widgets

Usage

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

# Running 
$ npm start # Start web ui and api concurrently, in development mode. 
$ npm run start:prod # Production mode. 
 
# Building 
$ npm build # Development build. 
$ npm run build:prod # Production build. 
 
# Testing 
$ npm test # This tests frontend components 
 
# Linting 
$ npm run lint

Libraries

Revfluence widgets 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.
  • Awesome 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

.
├── api                         # Backend api folder. 
├── build                       # Built app and lib. 
├── config                      # Root folder for configurations. 
│   ├── test                    # Test configurations. 
│   ├── types                   # Global type definitions, written by us. 
│   ├── webpack                 # Webpack configurations. 
│   └── main.js                 # Generic App configurations. 
├── node_modules                # Node modules. 
├── scripts                     # Scripts for deployment. 
├── src                         # Source folder. 
│   ├── app                     # Frontend(sandbox) for widgets lib. 
│   ├── lib                     # The source code for widgets lib. 
│   ├── client.tsx              # Entry point for client side rendering. 
│   └── server.tsx              # Entry point for server side rendering. 
├── .gitignore                  # Tells git which files to ignore. 
├── .stylelintrc                # Configures stylelint. 
├── package.json                # Package configuration. 
├── README.md                   # This file 
├── tsconfig.json               # TypeScript transpiler configuration. 
├── tslint.json                 # Configures tslint.