Modern React 19 template with TypeScript/JavaScript using Vite
- Modern Frontend Stack - React 19 + Vite 6 + TypeScript 5.7
- Language Flexibility
- ECMAScript (JavaScript)
- ECMAScript with JSDoc typecheck
- TypeScript
- UI/UX Excellence
- Ant Design 5.23 with full theme support
- Light/Dark theme toggle with system preference detection and localStorage persistence
- Customizable Ant Design design tokens with component overrides
- Responsive design with SCSS modules
- State Management - Redux Toolkit with React-Redux
- Internationalization - i18next with Korean/English/Japanese support and automatic language detection
- Developer Experience
- Hot Module Replacement (HMR)
- ESLint + Prettier configuration
- Atomic design pattern (atoms/molecules/organisms/templates)
- JSDoc documentation generation
- Dev Container support
- Testing & Quality - Vitest integration
- Routing - React Router DOM v6 with nested routes
- Performance - Bundle optimization with Lodash tree-shaking
Customize Ant Design tokens and component themes in src/lib/themeConfig.jsx. The example configuration overrides the global colorPrimary, adjusts component styles, and persists the user's theme preference in localStorage.
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
- Node.js >=18
- npm or yarn
- Clone or download template
npx degit comnori/vite-template-awesome-soho my-app
cd my-app- Install dependencies
npm install
# or
yarn install- Initialize git repository
git init
Project
├── assets // like svg
├── components // atomic design
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── config // project configuration
│ ├── i18n // i18next resource
│ │ ├── {lang} // ISO 639-1 Language Code [en,...,ko]
│ │ │ └── translation.json
│ ├── MenuItems.js
│ └── Router.js
├── context // React Context
│ └── {context name} // Context domain name
│ ├── components // Context related components
│ └── hooks // Context related hooks
├── features // Redux
│ └── {reducer name}
├── hooks // common hooks
├── lib // Library configuration
│ ├── components
│ └── {library name}Config.js
├── pages // Pages
│ ├── {domain}
│ │ ├── {page}
│ ├── {page}
│ │ ├── components // children for page
│ │ ├── {page}.jsx
│ │ ├── {page}.module.scss // module scss
└── utils // common utils
4. **Start development server**
```bash
npm start
# or
yarn start
- Optional: Setup VS Code SDK (for Yarn users)
yarn dlx @yarnpkg/sdks vscodenpm start- Start development server (port 3000)npm run build- Build for productionnpm run test- Run tests with Vitestnpm run lint- Run ESLintnpm run type- Generate TypeScript declarationsnpm run doc- Generate JSDoc documentation
React 19 • TypeScript 5.7 • Vite 6 • JavaScript ES2024
Ant Design 5.23 • SCSS Modules • CSS-in-JS
Redux Toolkit • React Router v6
Axios • i18next • Day.js • Pino Logger
ESLint • Prettier • Vitest • Dev Containers • JSDoc
src/
├── assets/ # Static assets (icons, images)
│ └── Icons/
│ └── CustomIcons.jsx
├── components/ # Atomic Design Pattern
│ ├── molecules/ # Simple UI combinations
│ │ └── LanguageSwitch/
│ ├── organisms/ # Complex UI components
│ │ └── Common/
│ │ ├── LoginForm/
│ │ ├── Result/
│ │ └── RootErrorBoundary/
│ └── templates/ # Page layouts
│ ├── BasicLayout/
│ ├── ExactlyCenter/
│ └── MinimalLayout/
├── config/ # App configuration
│ ├── i18n/ # Internationalization
│ │ ├── en/translation.json
│ │ └── ko/translation.json
│ ├── MenuItems.jsx # Navigation menu config
│ └── Router.jsx # Route definitions
├── context/ # React Context providers
│ └── Logger/
│ ├── components/LoggerProvider.jsx
│ └── hooks/useLogger.jsx
├── features/ # Redux slices & features
│ └── antd/
│ ├── ThemeChangeSwitch/
│ └── antdSlice.jsx
├── lib/ # Library configurations
│ ├── components/WebVitals.jsx
│ ├── i18nextConfig.jsx
│ ├── pinoConfig.jsx
│ ├── storeConfig.jsx
│ └── themeConfig.jsx
├── pages/ # Page components
│ ├── Homepage/
│ ├── Login/
│ ├── Loading/
│ └── admin/
│ ├── Dashboard/
│ └── Settings/
└── utils/ # Utility functions
Control type checking behavior in tsconfig.json:
{
"compilerOptions": {
"checkJs": true, // Enable/disable JS type checking
"allowJs": true, // Allow JS files in TS project
"strict": true // Strict type checking
}
}For selective type checking, use JSDoc comments:
// @ts-check- Enable checking for specific files// @ts-nocheck- Disable checking for specific files
Define your routes in src/config/Router.jsx:
const Router = [
{
path: "/",
element: <MinimalLayout />,
children: [
{ index: true, element: <Homepage /> },
{ path: "login", element: <Login /> },
],
},
];Configure navigation menus in src/config/MenuItems.jsx:
const MenuItems = {
NORMAL: [{ key: "home", label: <Link to="/">Home</Link>, icon: <HomeOutlined /> }],
ADMIN: [{ key: "settings", label: "Settings", icon: <SettingOutlined /> }],
};Customize Ant Design theme in src/lib/themeConfig.jsx:
const themeConfig = {
themeName: "light", // or "dark"
designToken: {
components: {
Layout: { headerHeight: 64 },
},
},
componentSize: "middle",
};npm test # Run tests with Vitest
npm run coverage # Run tests with coverage reportnpm run lint # Run ESLint
npx prettier --write src/ # Format codenpm run doc # Generate JSDoc documentation
npm run type # Generate TypeScript declarations-
Yarn PnP Module Resolution Issues Edit
.yarnrc.yml:nodeLinker: node-modules # Change from 'pnp'
-
Port Already in Use
- Default dev server runs on port 3000
- Change port in
vite.config.tsif needed
- Use Dev Containers for consistent development environment
- Enable JSDoc type checking for better IntelliSense
- Leverage Atomic Design principles for component organization
- Use Redux DevTools for state debugging
- React 19 Migration - ✅ Completed
- Vite 6 Upgrade - ✅ Completed
- Ant Design 5.23 - ✅ Completed
- Vitest Integration - ✅ Completed
- Storybook Integration - 🔄 In Progress
- Cypress E2E Testing - 📋 Planned
- TypeDoc Migration - 📋 Planned
MIT License - see LICENSE file for details.
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
Made with ❤️ by comnori