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