1.0.0 • Published 6 years ago
aspireiq-widgets v1.0.0
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
- 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 with following plugins
- 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.
1.0.0
6 years ago