This project was bootstrapped with Create React App, using the Redux and Redux Toolkit TypeScript template.
npx create-react-app %PROJECT_NAME% --template udtnpx command installs most recent stable version of CRA from npm. --template parameter points to this template, note that cra-template- prefix is omitted.
Then
cd %PROJECT_NAME%
npm run prepare # only required before first run
npm start-
Bootstrapped with Create React App.
-
Google’s Material Design through Material-UI.
-
Routing with React Router
-
State management with Redux Toolkit
-
Husky for git hooks.
-
Find and fix problems in code with Eslint
-
Format code with Prettier
-
Avoid errors and enforce conventions in styles with stylelint.
-
Commit convention made easy with Commitlint
-
Jest and react-testing-library for unit testing.
-
Cypres for End-to-end tests and integration testing
-
Additional useful utilities
- Material React Table -for building powerful tables & datagrids with Material UI.
- React Hook Form - for building forms with validations.
- JOI - A Schema based data validator
- React Toastify - to add notifications to your app
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it 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. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
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.
Fix lints issues according to style guide set.
Format the code with prettier
Fix lints issues according to style guide set
Create a test coverage report.
Enable git hooks
├── .husky # git hooks configurations
├── .env # dotenv config file
├── .eslintrc.json # eslint configurations
├── .commitlintrc.json # commitlint config file
├── .prettierrc.json # prettier configurations
├── .stylelintrc # stylelint configurations
├── Dockerfile
├── nginx.conf # nginx configurations
├── package.json
├── .gitignore
├── jsconfig.json # absolute path configurations
├── README.md # this file
├── public # public assets
└── src
├── components # React components folder
├── features # features folder
├── hooks # custom react hooks
├── pages
├── resources #images and other project resources
├── store # redux store
├── styles
├── App.jsx # main component
├── index.css
├── index.js # entry point file
└── setupTests.js # configuration to run jest tests
└── project.config.json # configuration to run jest testsGit hooks are scripts that run automatically every time a particular event occurs in a Git repository. They let you customize Git's internal behavior and trigger customizable actions at key points in the development life cycle.
Husky is a tool that allows us to easily wrangle Git hooks and run the scripts we want at those stages. It works by including an object right within our package.json file that configures Husky to run the scripts we specify.
In this template we use 2 git hooks
- pre-commit
The pre-commit hook is run first, before you even type in a commit message. Every time you commit something husky will run eslint --fix command on staged files that configured using lint-staged, preventing you from committing badly formatted code. You can change or disable this behavior inside linstagedrc.json config file.
- commit-msg
The commit-msg hook is much like the prepare-commit-msg hook, but it’s called after the user enters a commit message. This is an appropriate place to warn developers that their message doesn’t adhere to your team’s standards. In this template uses Commitlint that lints commit messages and makes sure they follow a set of rules.
In general the pattern mostly looks like this:
type(scope?): subject #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")Real world examples can look like this:
fix(server): send cors headers
Common types according to commitlint-config-conventional can be build, ci, docs, feat, fix, refactor, revert, style, test
Code quality tools provide static check of your code and try to fix errors. Checks are triggered inside pre-commit hook.
ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project. This template use lint set according to Airbnb style guide — as part of their style guide with custom set, tailored for reasonable and clean development process..eslintrc file specify configuration information for an entire directory and all of its subdirectories.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. .prettierrc file specify formatting configurations of this template.
Template includes Stylelint, to check CSS/SASS/LESS files. It is using stylelint-config-standard rule set. .stylelintrc file specify styling configurations of this template.
Template provides basic Redux configuration with Redux Toolkit. You can use Redux DevTools to power-up Redux development workflow or any other architecture which handles the state change
Template use React Router standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL
This template uses Jest JavaScript test runner that lets you access the DOM via jsdom. Jest offers functions for test suites, test cases, and assertions. React Testing Library is a set of helpers that let you test React components without relying on their implementation details
Unit Testing supported with react-testing-library that works with Jest. Refer the official docs about running tests for more information
$ yarn run test
To set coverage this template uses 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.Coverage report can be open using coverage/lcov-report/index.html file
$ yarn run coverage
E2E testing provided by Cypress.
$ yarn run e2e-test
for more information about testing.
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. See the production build section for more information.
$ npm run build
Docker is a containerization tool used to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services. It also helps to eliminate environment-specific bugs since you can replicate your production environment locally.
$ docker build -t frontend .
$ docker run -p 3000:80 -d frontend .
For more information, please refer to:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.