Skip to content

A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form, Cypress, Storybook, React-i18next and Material UI๐Ÿ‘จโ€๐Ÿ’ป

License

Notifications You must be signed in to change notification settings

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

46 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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

ts react redux redux-saga mui storybook jest cypress license


Table of Content

About

about.gif

Features

  1. React.js CRUD example with Redux Saga.
  2. Typescript for type safety
  3. Core libraries
  4. Test libraries
  5. Other tools/libraries
  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

posts.spec.ts

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

๐ŸŽ“ References

๐Ÿ‘จโ€๐ŸŽ“ Additional Links

License

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