react-base-template

A comprehensive, reusable React base template with modern tooling and best practices.

Overview

This template provides a solid foundation for React projects with a well-organized file structure, essential components, and development tools configured out of the box.

Features

• Vite - Fast development server and optimized builds
• TypeScript - Type safety and improved developer experience
• Component Library - Pre-built reusable components
• Docker Support - Containerization for consistent development environments
• CI/CD Ready - Includes Makefile and configurations
• Kubernetes Ready - Helm charts for deployment
• Organized Structure - Clear separation of concerns
• Development Tools - ESLint, Prettier, etc.

Installation

To use this template for your new React project:

npx create-react-app my-app --template react-base-template
# or with yarn
yarn create react-app my-app --template react-base-template

Template Structure

template/
├── charts/                # Helm charts for Kubernetes deployment
├── conf/                  # Configuration files for tools and servers
├── docs/                  # Documentation folder
├── public/                # Static assets
├── scripts/               # Utility scripts
├── src/                   # Source code
│   ├── assets/            # Images, fonts, and other static assets
│   ├── components/        # Reusable UI components
│   ├── configs/           # Application configuration
│   ├── contexts/          # React contexts for state management
│   ├── data/              # Static data files
│   ├── helpers/           # Helper functions
│   ├── hocs/              # Higher-order components
│   ├── hooks/             # Custom React hooks
│   ├── pages/             # Page components
│   └── styles/            # Global styles and utilities
├── docker-compose.yml     # Docker Compose configuration
├── Dockerfile             # Docker configuration
├── index.html             # HTML entry point
├── Makefile               # Build automation
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
└── ...                    # Other configuration files

Components

The template includes the following pre-built components:

• AlertBar
• Button
• ButtonSet
• FetchLoader
• Header
• Icon
• LabeledInput
• Layout
• SkipLinks
• StyledSelect
• Toast

Development

Inside the template project, you can run:

# Install dependencies
npm install
# or
yarn install

# Start development server
npm start
# or
yarn start

For Docker-based development:

docker-compose up

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT