react-redux-rtk-saga-mui-typescript-starter

A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form , React-i18next and Material UI.

---

Table of Content

• About
  • Features
  • Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Development
  • Build
  • Testing
    • Unit / Integration tests
    • E2E tests
  • Storybook
• Code Quality
  • Overview
  • Absolute imports
• Release
• Useful dev tools
• References
• Additional Links
• License

About

Features

1. React.js CRUD example with Redux Saga.
2. Typescript for type safety
3. Core libraries
   • Redux
   • Redux Toolkit
   • Redux Saga
   • Redux First History
   • Redux Logger
   • React Router
   • React Hook Form
   • Yup
   • Axios
   • React-i18next
   • MUI - Material UI
   • Styled Components
4. Test libraries
   • Jest
   • React Testing Library
   • Redux Saga Test Plan
   • Cypress
5. Other tools/libraries
   • StoryBook
   • Mock Service Worker
   • ESLint, Prettier , Lint-staged, Pretty Quick
   • Husky
   • Commitlint
   • Semantic Release
6. Opinionated folder structure
7. Internationalization for react app using React-i18next
8. Material UI Dark Mode support

Project Structure

./src
├── App.tsx # Application entrypoint
├── assets # assets folder contains all the static files (images, fonts, etc).
├── components # shared components
├── config # global configuration, env variables etc.
│   ├── Env.ts
│   └── i18n
├── features
│   ├── feature # 'feature'
│   │   ├── api # API folder contains http service calls
│   │   ├── assets # 'feature' assets folder
│   │   ├── components # 'feature' components
│   │   ├── hooks # 'feature' hooks
│   │   ├── index.ts # entry point for 'feature' public API
│   │   ├── store # 'feature' state stores contains slices, sagas, etc.
│   │   └── types # 'feature' typescript types
│   └── another_feature # 'another_feature'
├── hooks # shared hooks
├── libs # libraries imported or exported that can be used in different projects
│   ├── core
│   └── ui
├── pages  # contains all application pages
├── routes # routes configuration
├──  store # root store and store settings
└── test/ # contains test utilities and Mock Service Worker setup
    └── msw

👨‍💻 Getting Started

Prerequisites

nvm

brew install nvm

Node.js v17

nvm install v17.4.0

Yarn

npm install --global yarn

Installation

Install NPM packages:

yarn install

Development

To start the application in the development mode run:

yarn start

📝 Note: Application starts in sandbox-mode, with all backend calls mocked by MSW library. To disable it change REACT_APP_MSW_ENABLED variable to false.

💡 Tip: Open http://localhost:3000 to view application in the browser.

Build

To build the application for production, run:

yarn build

Testing

Unit / Integration tests

Launch the test runner in the interactive watch mode:

yarn test

See the section about running tests for more information.

Run yarn coverage to generate code coverage.

E2E tests

To run e2e use below command:

yarn build && yarn test:e2e

📝 Note: This script will start the server, wait until application is running, execute e2e tests and after that it will shut down the server.

💡 Tip: To run Cypress in interactive mode, start the application and run yarn cy:open

Storybook

Start Storybook in development mode:

yarn storybook

To build Storybook as static web application, run the following command inside project's root directory:

yarn build-storybook

💡 Tip: run npx http-server ./storybook-static to preview static web application locally.

👮 Code Quality

Overview

Running the script yarn format will format the code style of all TypeScript files.

The script yarn lint will run linter in the project. If any code standards or styles are not met in code, it will display the errors or warnings.

Run yarn lint:fix command to format code and fix automatically any error found - if the linter knows how to fix it😉.

💡 Tip: To enforce code conventions and prevent bad commits this project is setup to use Husky. Husky is used to run validation and format code before every commit. Additionally, it will check if git message is following conventional commits format.

Absolute imports

Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as ../../../Component. Wherever you move the file, all the imports will remain intact.

To enable Absoulte imports in Intelij ide go to Settings -> Editor -> Code Style -> TypeScript -> Imports and enable Use paths relative to tsconfig.json.

😈 Release

Create release version and generate a changelog file:

GITHUB_TOKEN=YOUR-TOKEN yarn release

💡 Tip: --no-ci - allows you to trigger release from no ci environment e.g. local

💡 Tip: yarn release:dry-run - allows you to see what commands would be run, without committing to git or updating files.

🛠 Useful dev tools

• React Developer Tools
• Redux DevTools
• Testing Playground
• Window Resizer
• React Hook Form - form builder
• i18next-scanner

🎓 References

• TypeScript Deep Dive
• React+TypeScript Cheatsheets
• Redux - style guide
• Redux Toolkit - Getting Started
• React Hook Form - typescript Support
• Bulletproof React
• Jest cheat sheet

👨‍🎓 Additional Links

• React Hook Form vs. Formik: A technical and performance comparison
• MUI - theme switcher
• Level up your CSS linting using Stylelint
• Create React App: A quick setup guide
• Using TypeScript with Redux Toolkit
• What is Redux Ducks?
• Redux DevTools: Tips and tricks for faster debugging
• Remove React.FC from Typescript template

License

Distributed under the MIT License. See LICENSE for more information.