Cra-template-iglu NPM

cra-template-iglu

To use this template, add --template iglu when creating a new app.

For example:

npx create-react-app my-app --template iglu

# or

yarn create react-app my-app --template iglu

Additional changes required (Custom Template limitations)

Copy files from project-folder/src/_PROJECT_ROOT_ to project-folder/ (can't be added with custom template)

Currently template only updates package.json dependencies and scripts object, so we have to add few lines manually:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && npm run test:coverage"
    }
  },
  "lint-staged": {
    "**/*.{ts, tsx}": [
      "eslint --fix",
      "git add"
    ],
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

Features

Quality tools (code): Typescript, ESLint, Prettier, React-testing-library, Husky
Quality tools (UI): Storybook
Quality tools (A11y): React Axe, Why Did You Render
Addons: MobX, SASS, Formik, ReactGA
Performance: Fast Refresh
Hosting: Netlify

Available Scripts

yarn - Install dependencies
yarn start - Runs the app in the development mode.
yarn test - Launches the test runner in the interactive watch mode.
yarn test:coverage - Runs the tests once.
yarn build - Builds the app for production to the build folder.
yarn lint - Look for linting errors
yarn lint:fix - Look and fix linting errors
yarn storybook - manage UI components
yarn eject - will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them.