b1nd-react-app

Version: 1.3.1 (Latest)

Overview

b1nd-react-app is a modern React boilerplate template powered by Rsbuild (default) or Vite for rapid development. It includes pre-configured authentication setup with Axios interceptors for seamless API communication. The project structure is extensible and optimized for both development and production environments.

Key Features

⚡ Rsbuild: 5-10x faster build speed than Webpack (zero-config, zero setup) 🚀 Vite Alternative: Sub-second HMR for alternative bundler choice 🔐 Auth Ready: Built-in token management and axios interceptors 📦 Production Ready: Optimized for both development and production builds 🎯 CLI: Interactive setup with TypeScript/JavaScript and npm/yarn/pnpm/bun support

How to Use

Quick Start

Create a new project with a single command:

npx b1nd-react-app my-app

Or use the current directory:

npx b1nd-react-app .

Interactive Setup

The CLI will guide you through these selections:

1. Bundler Selection (Choose your build tool):

   ❯ Rsbuild (Recommended, Fastest) ⚡
     Vite
   

2. Language Selection (Choose your language):

   ❯ TypeScript
     JavaScript
   

3. Package Manager Selection (Choose your package manager):

   ❯ npm
     yarn
     pnpm
     bun
   

4. Axios Integration (Include API client):

   ❯ Yes (Recommended)
     No
   

Command-Line Options

You can also use CLI flags to skip the prompts:

# Use Rsbuild with TypeScript
npx b1nd-react-app my-app --bundler rsbuild --language ts

# Use Vite with JavaScript
npx b1nd-react-app my-app --bundler vite --language js

# Skip dependency installation
npx b1nd-react-app my-app --skip-install

Getting Started After Project Creation

After creating your project, navigate to the directory and start development:

cd my-app

# Start development server
npm run dev      # or yarn dev, pnpm dev, bun dev

# Build for production
npm run build    # or yarn build, pnpm build, bun build

# Preview production build locally
npm run preview  # or yarn preview, pnpm preview, bun preview

# Run linting
npm run lint     # or yarn lint, pnpm lint, bun lint

# Format code with Prettier
npm run format   # or yarn format, pnpm format, bun format

Installation Speed Comparison

Bundler	Install Time	Build Time	HMR
Rsbuild	~30-60s	5-10x faster	3-4s
Vite	~30-60s	Fast	<1s
Webpack	~2-3 min	Baseline	9-10s
CRA (Deprecated)	~2-3 min	Slow	10s+

Configuration (For Axios Templates)

If you selected Axios during setup, you'll need to configure the following:

1. API Base URL (src/config/config.json):

   {
     "server": "https://your-api-baseurl.com"
   }

2. Token Refresh Endpoint (src/libs/axios/responseInterceptor.ts):

   • Update the /refresh endpoint to match your API's token refresh route
   • Modify the request body structure to match your API's requirements

3. Login URL (src/libs/axios/requestInterceptor.ts):

   • Change the default /login path to your application's login route
   • This path is used when tokens are invalid

4. Token Storage (src/libs/token/token.ts):

   • By default, tokens are stored in browser cookies
   • You can modify this to use localStorage, sessionStorage, or other methods

Notes

Token Management (Axios Templates)

• Token Storage: By default, tokens are stored in browser cookies
• Token Types: accessToken (short-lived) and refreshToken (long-lived)
• Setting Tokens: Use Token.setToken(key, value) after authentication

  import Token from '@libs/token/token';
  import { ACCESS_TOKEN_KEY } from '@constants/token.constants';
  
  // After login
  Token.setToken(ACCESS_TOKEN_KEY, response.data.accessToken);

• Automatic Refresh: Axios interceptors automatically handle token refresh on 401 errors

Architecture Patterns

• This boilerplate follows a component-based architecture optimized for React
• Designed to work well with modern state management solutions (React Context, Zustand, Redux)
• Works seamlessly with React Query for server state management
• Path aliases (@components, @hooks, etc.) are pre-configured for cleaner imports

Optional Customizations

• Remove Axios: If you don't need Axios, delete src/libs/ and src/config/ directories
• Token Storage: Replace cookie storage in src/libs/token/token.ts with localStorage or sessionStorage
• Styling: Add CSS-in-JS libraries (styled-components, emotion) as needed

Folder Architecture

├─public
└─src
    ├─api               # API related files
    ├─assets            # Static files such as images, fonts, etc.
    ├─components        # UI components
    ├─config            # Configuration files (config.json)
    ├─constants         # Constant files
    │   └─token         # Token-related constants
    │      └─token.constants.ts
    ├─hooks             # Custom hooks
    ├─libs              # Libraries and helper functions
    │   └─axios         # Axios-related settings
    │      ├─customAxios.ts
    │      ├─requestInterceptor.ts
    │      └─responseInterceptor.ts
    │   └─token         # Token-related settings
    │      └─token.ts
    ├─pages             # Page components
    ├─queries           # React Query related files
    ├─styles            # CSS/SCSS files
    ├─types             # Type definitions
    └─utils             # Utility functions

Bundler-Specific Architectures

React

The project follows a component-based architecture with React hooks, context, and optional state management.

📖 React Architecture Guide

Rsbuild (Recommended)

Rsbuild is a blazing-fast build tool powered by Rspack (Rust-based). It offers:

• ⚡ 5-10x faster builds than Webpack
• 🚀 Zero-config setup with sensible defaults
• 🔄 Consistent Dev/Production builds
• 📦 Automatic code splitting and chunking
• ✅ Full Webpack plugin compatibility

The Rsbuild template includes optimized configuration for production builds with chunk splitting and minification.

📖 Rsbuild Architecture Guide 📚 Official Rsbuild Docs

Vite

Vite is a modern bundler focused on speed with:

• ⚡ Sub-second HMR (Hot Module Replacement)
• 🚀 Fast cold starts
• 📦 Optimized production builds
• 🎯 Great developer experience

The Vite template provides an alternative for developers who prefer Vite's approach.

📖 Vite Architecture Guide 📚 Official Vite Docs

Community

The b1nd-react-app community can be found on GitHub Discussions, where you can ask questions, share ideas, and showcase your projects with other community members.

Please note that our Code of Conduct applies to all b1nd-react-app community channels. We strongly encourage all users to read and adhere to the Code of Conduct to ensure a respectful and productive environment for everyone.

Contributing

Contributions to b1nd-react-app are welcome and highly appreciated. However, before you jump right into it, we would like you to review our Contribution Guidelines to ensure a smooth experience contributing to the project.

Good First Issues:

We have a list of good first issues that are perfect for newcomers and beginners. These issues are relatively limited in scope, making them a great starting point to gain experience, understand the contribution process, and get familiar with the codebase. Check out the list of good first issues and start contributing today! How to write an issue

---

We look forward to your contributions!

DOCS

한국어 DOCS

• Test Documentation