react-tcli

Typescript rewire of react-scripts where you can extend the webpack config.
This is not a fork of react-script but it builds on top of any published react-scripts libary.

common issues

Python with sass for windows:
npm config set python "path/to/python"

Features

- CSS modules and "normal" css
- Jest, Enzyme and React with react-scripts and ts-jest
- Typescript
- Synthetic default import
- Dynamic imports
- Tslint
- Path alias for typescript

Disclaimer

This is a work in progress. If you find any bug or want better documentation please let us know!

Install (getting started)

run npm install @ords/react-tcli or do a global install npm install @ords/react-tcli -g.

You can then setup a new project with: react-tcli init. This will create a new folder called sampleProject.

If you have an exisiting project then modify your _package.json_ you can add the following scripts:

"test": "react-tcli --src customPath/To/Src --withLatestReactEnzyme",
"start": "react-tclit --src customPath/To/Src",
"build": "react-tclit --src customPath/To/Src"

Suggested tslint

Use the build in linter by adding a tslint.json file in the root of your project with the following:

{
"extends": [
"./node_modules/@ords/react-tcli/dist/defaultConfigurations/tslint.json"
]
}

Suggested and tested tsconfig compiler options

We only support a target of es5. To use our tsconfig, create your own with the following content:

{
"extends": "./node_modules/@ords/react-tcli/dist/defaultConfigurations/tsconfig.json"
}

CSS modules

You can use traditional css import or name your files .module.css to use css modules.

Commands

Any commands that use webpack can have the configuration extended. Configurations for all the commands are described in this section.

Command init

Creates a new project

Command test

Use Jest to run test as of react-scripts. Filenames should be [name].spec.(ts|tsx|js|jsx)

| Prop | Default | Description |
|-----------------|---------|--------------------------------|
| --src | src | Location of test source files |
| --env | undefined | please specify jsdom to use mount in jest |
| --setupTestFile | undefined | Location of jest setupTestFile |
| --withLatestReactEnzyme | undefined | Using setupTestFile from this project |

Command start

Use webpack to serve and develop your react project

| Prop | Default | Description |
|-----------------|---------|--------------------------------|
| --src | src | Location of source files |
| --public | public | Location of react public dir |
| --extendWebpackFile | undefined | Location of file to extend webpack config |

Command build

Use webpack to build your react project

| Prop | Default | Description |
|-----------------|---------|--------------------------------|
| --src | src | Location of source files |
| --public | public | Location of react public dir |
| --extendWebpackFile | undefined | Location of file to extend webpack config |

More features

Are we missing anything? Should the project be even more configurable? Let us know!