---
name: React Fuse-Box Typescript
---

# React Fuse-Box Typescript

Templates are boilerplate starter projects that contain all of the essential elements 
that are required to start building applications and component libraries.

This allows you to set up a modern web app by running one command.

The React starter template includes

* React (latest)
* Fuse-Box (instead of webpack)
* Babel 7 and Typescript 3  
* Jest
* TSLint and Prettier
* A well-defined `tsconfig.json` file
* All the appropriate optimizations and configurations from `create-react-app` with all the flexibilty without ejecting.

### Install
 
```bash
$ yarn create berun myapp @berun/template-fuse-box-react-ts
```

### Run

```bash
$ cd myapp
$ yarn start
```

### Test

```bash
$ cd myapp
$ yarn test
```

### Publish

```bash
$ cd myapp
$ yarn build
```


## Comparison to `create-react-app`

On the surface this template is very similar to `create-react-app` with the addition of all the statically
typed benefits of Typescript over Javascript.  For quick prototyping the experience will feel very similar, 
with the same start, test, and build commands, but with the added benefit of design time syntax checking that comes
with a statically typed language.

However, from the start you will notice faster development start and build times, as Fuse-Box has significant
caching enhancements over Webpack.

Further, as projects evolve, usually some extra or different build configuration will be required.  For
example, you may want to add a storybooking tool to generate live documentation.   Or add a static website.
Or use a custom preprocessor.   

With `create-react-app` this requires ejecting, and thus all the benefits of a centrally maintained configuration
and recommended settings are lost.  For larger organizations this leads to configuration proliferation.

With `@berun/template-fuse-box-react-ts` this requires adjusting a single `berun.config.js` file, regardless of whether
changes are needed to webpack, jest, babel, etc., and can be done delicately (using a fluent interface) 
to tweak the existing configuration vs ejecting/forking it and rewriting it.  

### Example: swap out fuse-box for webpack

```js
// berun.config.js
module.exports = {
  use: [
    '@berun/preset-react-ts',  /* REMOVED '@berun/preset-fuse-box-react-ts', */
    '@berun/runner-tslint',
    '@berun/runner-prettier'
  ]
}
```

### Example: support TS Main to transpile Typescript dependencies in node_modules

```js
// berun.config.js
module.exports = {
  use: [
    '@berun/preset-react-fusebox-ts',
    '@berun/runner-tsmain', /* ADDED */
    '@berun/runner-tslint',
    '@berun/runner-prettier'
  ]
}
```

