This project was based on Create React App. (4.0.1 (2020-11-23))
Vite-version / Unbundled Development available at vite branch
Includes all features of CRA, with some opinionated tweaks but provide flexible configurations.
- Webpack 4 with
dynamic import()
,react-refresh
, modern JSX and build optimizations. - Tailwind 2
- TypeScript 4
- React 17 with
react-router-dom
,recoil
as state management - i18next with locale splitting
- SASS (with
dart-sass
), PostCSS withautoprefixer
,CSS Module
supported and optimizations. - Babel in
Stage 1
with tree-shaking support forramda
,date-fns
- ESlint configured to work well with Prettier, Typescript, EditorConfig in multiple environment: IDE (VSCode), compile (start & build)
- Jest + Enzyme for testing
- Lintstaged & Husky for automatically lint & formatting
- VSCode specific settings, extensions & debug launch config
- Docker, docker-compose with
nginx
config for development and deployment
- recoil
- react-router-dom
- axios
- ramda
- date-fns
- react-helmet-async
- classnames
- immer
- i18next + react-i18next
- why-did-you-render (for development)
- react-toastify (with toast util)
git clone https://github.com/huynhducduy/react-starter-kit react-app
cd react-app
yarn
or Create a new repository from react-starter-kit
cp .env.example .env && vi .env
Alias: in tsconfig.json
- compilerOptions.paths
. Automatically resolve in webpack
, jest
environment.
With docker: docker-compose up --build -d
Without docker: yarn start
Configure in docker-compose.yml
file, default running on port 3000
Running test: yarn test
Debugging tests: yarn test:debug
Lint code & style: yarn lint
Fix code & style: yarn fix
Reinstall entire project: yarn refresh
Build image: sudo docker build -t react-starter-kit .
Run container: sudo docker run --init -dit -p 3000:80 --name react-starter-kit react-starter-kit:latest
Kill and remove: (sudo docker kill react-starter-kit || true) && (sudo docker rm react-starter-kit || true)
Without docker: yarn build
, output is located at /build
Analyze output: yarn analyze
- Stylelint
- Upgrade to Webpack 5 (with
terser-webpack-plugin
5,html-webpack-plugin
5,postcss-loader
5,sass-loader
11) - GraphQL - Relay/Apollo
- Server-Side rendering
- PWA - workbox/firebase
- Storybook?
@typescript-eslint/typescript-estree
is not yet compatible with Typescript^4.2.0
, can cause some bugsReact.lazy
is not yet available for server-side rendering- @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
- [email protected]" has incorrect peer dependency "react@^16.6.0".
- [email protected]" has incorrect peer dependency "react-dom@^16.6.0".
- [email protected]" has incorrect peer dependency "react@^16.13.1".