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
  • Make sure to enable corepack (Open CMD as admin)
    • corepack enable
  • To allow yarn command in VS code make sure to use Set-ExecutionPolicy Unrestricted (Open Powershell as admin)
• 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)
  • yarn set version berry
• 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

• FAQ

Refrences

• A Comprehensive Guide to Setting Up ESLint, Jest, and Prettier in Node TypeScript
• Modern Testing Setup: Jest and React Testing Library for React TypeScript Projects

---

Connect with me on