@tasoskakour/cra-template-typescript

Opinionated Create React App template with Typescript.¹

¹: PWA, eslint, Material UI, react-router, jest, react-testing-library, Google Analytics, Sentry, apollo-client, zustand, craco, and other bits and bobs.

Usage

$ npx create-react-app my-app --template @tasoskakour/cra-template-typescript

If building a React library

If you want to use this template to build a react library, or just a React app that will be imported from another React/JS project, then you would have to adjust the build command and add a tsconfig.build.json file to specify what and how you want to build.

Personally I adjust the build and also add a copyfiles command as

"copy-files": "copyfiles -f src/**/*.{css,svg} dist/",
"build": "NODE_ENV=production rm -rf dist && yarn copy-files &&  tsc --build \"./tsconfig.build.json\"",

and I add tsconfig.build.json file with the below configuration (depends on what components you want to actually build):

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2015", "dom"],
    "outDir": "dist",
    "jsx": "react-jsx",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/components"
  ],
  "files": [ "./src/components/index.ts", "./src/react-app-env.d.ts"],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

Finally I set the main property of package.json to something like "main": "dist/index.js",

Note: Be sure to edit .env & .github/workflows/ci.yml accordingly, before starting developing!

The end

🥰 Big props to my buddy Napoleon, as this repo is heavily influenced from his own cra-template.