TSRX
TypeScript + React
This package contains the following modules:
- Typescript > 4.3
- React > 17
- Jest 27 + testing-library
The builder has the following module bundlers:
- Webpack > 5.51
- Babel > 7.15
Install
# install tsrx
npm i -S tsrx
# install dependencies
npm i -S react react-dom typescript
# install dev dependencies
npm i -D @types/react @types/react-dom
# install test utilities
npm i -D jest @testing-library/jest-dom @testing-library/reactSetup tsconfig
Extend base tsconfig.json from TSRX folder:
{
"extends": "tsrx/tsconfig.json",
"compilerOptions": {}
}Setup the script configuration
Create a js file as example below to setup the scrips command with a mininal setup:
Ex.: react.config.js
const { DefaultConfig } = require('tsrx/tools');
module.exports = DefaultConfig({
// port to be used in development
// will be set in webpack-dev-server
port: 8080,
devServer: {
// development server
// will open the browser
// as soon as the project
// was compiled
open: true,
},
});Using scripts
TSRX have methods to be used in scripts of the package.json.
Is better to set unique config file for each method:
{
"scripts": {
"start": "tsrx start ./react.config.js",
"build": "tsrx build ./react.config.prod.js",
"test": "tsrx test ./react.config.test.js"
}
}Advanced options
Ex.: react.config.js
const { DefaultConfig } = require('tsrx/tools');
module.exports = DefaultConfig({
/**
* Source path of application files
* Default = src
*/
sourcePath: 'src',
/**
* Source index file of the app.
*
* If not provided, the index file will be search
* on the sourcePath with these extensions => js, jsx, ts, tsx
*/
sourceFile: 'index.ts',
/**
* output path for the compiled bundle.
*
* default = 'dist'
*/
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
*
* default = localhost
*/
host: 'localhost',
/**
* object with all enviroments to be set in
* - node: thru process.env
* - html: thru <%= htmlWebpackPlugin.options.propertyName %>
*/
env: {
textExample: 'Comment from Node Enviroments',
booleanValueExample: true,
numericValueExample: 37,
htmlExample: 'Comment from HTML Enviroment',
},
});Jest customization
In case, if your tests require specific Jest configuration, include jest property in your react.config.test.js:
module.exports = DefaultConfig({
...
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:
module.exports = DefaultConfig({
devServer: {
open: true,
publicPath: '/',
contentBase: path.join(__dirname, 'dist'),
},
...
});Webpack options customization
Any properties defined in this property will override TSREX config:
module.exports = DefaultConfig({
webpack: (config, env) => {
// set your own webpack config
config.output.publicPath = '/';
},
});Module Federation
Shared modules from webpack 5 can be configured
module.exports = DefaultConfig({
moduleFederationOptions: {
name: 'app-name',
shared: ['react', 'react-dom', 'react-router-dom'],
filename: 'remoteEntry.js',
exposes: {
'./App': `./src/App`,
},
},
});