Vite Base Bootstrap Template

Description

This project is a minimal starter template for building React applications with Vite and Bootstrap. It’s designed to provide a fast development environment with essential tooling for responsive, modern web apps. This template serves as a foundational setup that you can extend and customize as needed.

Features

• React 18 for building interactive user interfaces
• Vite for rapid development and optimized builds
• Bootstrap 5 for responsive design and pre-built UI components
• SASS for customizable styling
• ESLint for code quality assurance
• TypeScript support for type safety

Prerequisites

• Node.js (compatible with project dependencies)
• npm (bundled with Node.js)

Installation

To start using this template, follow these steps:

1. Clone the repository.
2. Install dependencies:

npm install

Usage

Development

Start the development server with hot reloading:

npm run dev

Building for Production

Build the project for production:

npm run build

Previewing the Production Build

To preview the production build locally:

npm run preview

Linting

Run the linter to ensure code quality:

npm run lint

CSS Compilation

Compile and add prefixes to CSS:

npm run css

This command performs the following sub-tasks:

• css-compile: Compiles SASS to CSS
• css-prefix: Adds vendor prefixes using Autoprefixer

Dependencies

• React: ^18.3.1
• React DOM: ^18.3.1
• Bootstrap: ^5.3.3

Dev Dependencies

• Vite: ^5.4.10
• @vitejs/plugin-react-swc: ^3.5.0
• ESLint and related plugins
• TypeScript type definitions for React
• SASS: 1.77.6
• PostCSS: 8.4.39
• Autoprefixer: 10.4.20

Scripts

• dev: Start the development server
• build: Build for production
• lint: Run ESLint
• preview: Preview the production build
• css: Compile and prefix CSS
• css-compile: Compile SASS to CSS
• css-prefix: Add vendor prefixes to CSS

License

This project is licensed under the MIT License.

Contact

For any questions or suggestions, please reach out via GitHub or LinkedIn.