A quick starter Create React App (CRA) template with P12 including:
- React v18.2.0
- Type Checker - TypeScript ^4.8.4
- Preprocessors - Less
- State management - Recoil
- CSS — Tailwind CSS
- Router - React Router
- Unit Testing - Jest & Enzyme + Sinon
- E2E Testing - Jest & Puppeteer
- Folder structure
- Generate templates
- Format & Lint - ESLint & Prettier
- Useful utilities - Moment, Classnames, Serve, react-snap, React-Helmet, Analyzer Bundle, react-uuid.
Custom Templates, format, and ESLint configurations. The original Create React App README available here.
yarn create react-app your-project-name --template p12
Or;
npx create-react-app your-project-name --template p12
npx
package runner tool installs the most recent stable version of CRA from npm. (npx comes out of the box with npm 5.2+)
--template
parameter points to this template, note that cra-template-
prefix will be omitted.
Inside the project directory run using npm
or yarn
:
start
- runs the app in the development mode. Open http://localhost:3000 to view it in the browser.test
- launches the test runner in the interactive watch mode.build
- builds the app for production to thebuild
folder.build:serve
- run a local static build using the production build using serve library. Installnpm install -g serve
.build:profile
- profiling production build.eject
- exposes content ofreact-script
packagelint
- lints project files according to Airbnb — as part of their style guide 👍 — it provides an ESLint configuration that anyone can use and it is the standard.lint:fix
- fix lints issues according to style guide set.prettify
- will format your code prettier using opinionated settings inside.prettierrc
file.test:e2e
- run e2e integration testing with the help of Jest & Puppeteer.test:e2e-watch
- same as test:e2e just with a watcher.test:e2e-alone
- stand-alone e2e integration testing NodeJS script for testing using Puppeteer.test:debug
- debug your jest tests using the debugger statement, more info here.coverage
- this test is to create a coverage report at needs extra setting in order to work as expected.analyze
- source-map-explorer to Analyzer Bundle.analyzer
- uses cra-bundle-analyzer to Analyzer Bundle.
CRA template only support scripts
and dependencies
inside generated package.json
. No devDependencies
is possible on CRA template for now.
Router via React Router v5.2.0 and is set on 'AppRouter.tsx' and included in 'index.tsx', read here.
The code is set for Recoil
To test a template locally, pass the file path to the directory of your template source using the file: prefix.
npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]
To set coverage we can use Jest. Jest allow us to create reports in different format and set where we want to collect these reports from (or not collect them from), as well as ensure the coverageThreshold. Take a look at my 'package.json' settings;
To get testing coverage report, you need to include the following settings in your 'package.json' file;
// package.json
"jest": {
"coverageReporters": [
"json",
"text",
"html",
"lcov"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*/*.d.ts",
"!src/**/*/Loadable.{js,jsx,ts,tsx}",
"!src/**/*/types.ts",
"!src/**/store.ts",
"!src/index.tsx",
"!src/serviceWorker.ts",
"!<rootDir>/node_modules/",
"!**/templates/**",
"!**/template/**"
],
"coverageThreshold": {
"global": {
"branches": 50,
"functions": 50,
"lines": 50,
"statements": 50
}
}
In this example, I am enforcing 50% 'coverageThreshold', when I set these it can ensure that I am testing in within my threshold or get an error. That can come handy, because we can set these setting to ensure that every single function, statement, lines and branches get at least 50% or even set it to 100% test coverage.
E2E testing provided by Jest & Puppeteer. Check the E2E folder for stand-alone and testing app.test.tsx component. You can read more about it here.
To run the E2E stand-alone and Jest & Puppeteer tests run;
$ yarn test:e2e
And;
$ yarn test:e2e-alone
Lint set according to Airbnb style guide — as part of their style guide. Feel free to tweak .eslintrc
.
Prettier is set using my opinionated settings, feel free to tweak prettier rules inside config file .prettierrc
to match your code style.
generate-react-cli help speed up productivity in React projects, feel free to tweak rules inside the config file generate-react-cli.json
to match your needs.
- Prerender - almost static pages using
react-snap
. See comments in:src/index.tsx
; - Precache - src/index.tsx >
serviceWorker.register()
- Analyzer Bundle -
yarn add -D cra-bundle-analyzer
-> Create the report:npx cra-bundle-analyzer
Read more about optimizing in this article.
‘bundle-analyzer’ (https://github.com/svengau/cra-bundle-analyzer), is my prefer bundle analyzer, it's more colorful and includes all the bundles in one page instead of calling them one by one with source-map-explorer.
Install (yarn add --dev cra-bundle-analyzer) & you use the run script:
$ yarn analyzer
Other option is to use source-map-explorer (yarn add --dev source-map-explorer);
$ yarn analyze