speedyreact-kit
- The React Redux Esbuild Jest Starter is a modern, efficient boilerplate designed to kickstart your React projects with powerful tools and best practices. This template integrates React, Redux Toolkit, Esbuild, and Jest, ensuring optimal performance and a smooth development experience.
Common Feature
- Redux Toolkit: Integrated with Redux Toolkit for efficient state management.
- TypeScript: Fully typed with TypeScript for static typing and improved productivity.
- Yarn and Yarn Berry: Uses Yarn and Yarn Berry for fast and reliable dependency management.
- ESBuild: Utilizes ESBuild for fast and efficient application bundling.
- Jest: Pre-configured with Jest for unit and integration testing.
- ESLint: Configured with ESLint for consistent code quality and style.
- Prettier: Integrated with Prettier for code formatting.
- Husky: Uses Husky for Git hooks to enforce code quality before commits.
- Project Structure: Organized project structure with clear separation of concerns.
- Development Experience: Hot module replacement (HMR) for a smooth development experience.
- CI/CD Integration: Example CI/CD pipeline configurations for automated testing and deployment.
- Environment Configuration: Supports multiple environments with easy configuration.
Core Packages
Setup
Prerequisite
- Install Yarn Globally
- Yarn PnP and ESBuild
- Setup Yarn PnP in vs code
- Install the ZipFS extension, which is maintained by the Yarn team.
- Run command on terminal
yarn dlx @yarnpkg/sdks vscode
Project Setup
- Clone the project
git clone https://github.com/santoshshinde2012/speedyreact-kit.git
- Set the Yarn Version (Make sure to do
corepack enable
)
- Install Modules locally using Yarn
yarn install
- Make sure to create env variables
.env.development
Run Project
Development Mode
- Run Project in Development Watch Mode
yarn dev
- Create Build for Development Environment
yarn build-dev
- Serve Dev Build
yarn serve
before running this to make sure to create dev build using yarn build-dev
Testing
- To run the test cases
yarn test
Project Structure
├── eslint.config.mjs
├── jest.config.ts
├── mock
│ ├── file.ts
│ └── style.ts
├── package.json
├── prettierrc.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── script
│ ├── build.mjs
│ ├── common
│ │ ├── args.mjs
│ │ ├── config.mjs
│ │ └── file.mjs
│ ├── plugin
│ │ ├── env-plugin.mjs
│ │ └── meta-plugin.mjs
│ └── serve.mjs
├── setupTests.ts
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── config
│ │ └── index.ts
│ ├── index.css
│ ├── index.tsx
│ └── logo.svg
├── tsconfig.json
├── types.d.ts
├── wiki
│ ├── faq.md
│ └── jest-setup.md
└── yarn.lock
Wiki
Refrences
Connect with me on