TSREX
TypeScript React EXRedux
This package contains the following modules:
- Typescript 3
- React 16
- ExRedux (Redux abstraction with Decorators)
- Jest 24 + Enzyme 3 (for tests)
The builder has the following module bundlers:
- Webpack 4
- Babel 7
- babel-jest (for tests)
Install
# install TSREX npm i -S tsrex
Setup tsconfig and tslint
Extend base tsconfig.json from TSREX folder:
Same for tslint.json:
Setup the script configuration
Create a js file as example below to setup the scrips command:
Ex.: react.config.js
moduleexports = // source of files source: 'src' // output path outputPath: 'dist' // port to be used in development // will be set in webpack-dev-server port: 8080 // hostname to be used in development // will be set in webpack-dev-server host: 'localhost' // all enviroments to be set in process.env nodeEnv: commentsExample: 'Comment from Node Enviroments' booleanValueExample: true numericValueExample: 37 // all enviroments to be set in HTMLWebpackPlugin // available in HTML thru <%= htmlWebpackPlugin.options.propertyName %> htmlEnv: htmlComments: 'Comment from HTML Enviroment' ;
Using scripts
TSREX have four methods to be used in scripts of the package.json.
Is better to set unique config file for each method:
Jest customization
In case, if your tests require specific Jest configuration, include jest property in your react.config.test.js:
moduleexports = source: 'application' outputPath: '' nodeEnv: {} htmlEnv: {} port: 0 hostname: '' jest: coverageThreshold: global: branches: 50 functions: 50 lines: 50 moduleNameMapper: '@components/(.*)': '<rootDir>/src/components/$1' '@containers/(.*)': '<rootDir>/src/containers/$1' '@interfaces/(.*)': '<rootDir>/src/interfaces/$1' '@services/(.*)': '<rootDir>/src/services/$1' updateSnapshot: true ;
DevServer customization
In case if is necessary to customize webpack-dev-server options, just include "devServer" in your react.config.test.js:
moduleexports = devServer: hot: true publicPath: '/' contentBase: path ...;
Webpack plugin customization
!!! THIS OPTIONS IS DEPRECATED !!!
Don't use this option. Use webpack instead
// DEPRECATEDmoduleexports = plugins: // insert your webpack plugins here ;
Webpack options customization
Any properties defined in this property will override TSREX config:
moduleexports = webpack: // insert your config here ;
Enable React Hot Loader
This utility, enables the plugin react-hot-loader, that increments your application without losing the current state.
To use this utility, just enable it in your react.config.test.js:
moduleexports = reactHotLoader: true ...;
And wrap the main app with the reactHot function:
;; ;