# 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!