create-itp-react-app

Generates an ITP-ready React App.

Uses create-react-app under the hood. Adds some extra features and example files within our common directory structure.

Typescript is enabled by default.

Getting started

$ npx @inthepocket/create-itp-react-app <your-project-name>
$ cd <your-project-name>
$ npm start

Features

• create-react-app (react-scripts)
• react
• react-dom
• redux
• redux-saga
• react-redux
• redux-react-hook
• typesafe-actions
• react-test-renderer
• redux-saga-test-plan
• typescript
• tslint 1
• normalizr
• css modules (comes with react-scripts)
• stylelint
• react-app-rewired 2
• react-app-rewire-postcss 2
• postcss-preset-env 2
• @inthepocket/itp-react-scripts
• @inthepocket/hubble-mirror
• @inthepocket/design-docs
• @inthepocket/common-components
• @inthepocket/itp-css

1 should be replaced by eslint in the near future, as pointed out by @thibmaek

2 postcss & postcss-preset-env now come with react-scripts (stage 3 configured). Unfortunately we still need to rewire, because we'll need stage 1 & the custom-media-queries feature.

Generated project structure

├── design-docs
└── src
    ├── __mockdata__
    ├── app
    │   └── screens
    ├── common (import from generated-project-name/common)
    │   ├── assets
        |   ├── fnt
        |   ├── img
    │   ├── components
    │   │   ├── atoms
    │   │   ├── molecules
    │   │   └── organisms
    │   └── primitives
    └── core (import from generated-project-name/core)
        ├── actions
        ├── reducers
        ├── sagas
        ├── schemas
        ├── selectors
        └── services
        └── types

Local packages

• generated-project-name/common
• generated-project-name/core
• generated-project-name/mock

Example files

The generated project comes with some example files that demonstrate:

• state management with redux, redux-saga, typesafe-actions, normalizr & redux-react-hook
• testing with jest, react-test-renderer, redux-saga-test-plan and using mock data

Development (running the generator locally)

• run the prepublishOnly script before running the generator (to generate the design-docs template folder)
• run node index.js <MY_PROJECT_NAME>
• a generated project is created in the folder <MY_PROJECT_NAME>

Known issues

Error: ENFILE: file table overflow

Stack trace

$ (node:56347) UnhandledPromiseRejectionWarning: Error: ENFILE: file table overflow, open '<LOCAL_PATH>/node_modules/jest-matchers/build/spyMatchers.js'
$ (node:56347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise whichwas not handled with .catch(). (rejection id: 1)
$ (node:56347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Workaround

$ echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
$ echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -w kern.maxfiles=65536
$ sudo sysctl -w kern.maxfilesperproc=65536
$ ulimit -n 65536

Jira ref: DESSSYS-26