Skip to main content

​
Prerequisites

Before installing the system, ensure you have the following installed on your machine:
  • Node.js (v18 or higher)
  • npm, yarn, or pnpm package manager
  • Git for version control
  • A modern web browser (Chrome, Firefox, Safari, or Edge)

​
Installation Steps

​
1. Clone the Repository

First, clone the project repository to your local machine: 
git clone <repository-url>
cd vite_react_shadcn_ts

​
2. Install Dependencies

Install all required dependencies using your preferred package manager: 
npm install
The system uses a comprehensive set of dependencies including:
  • React 18.3.1 - UI framework
  • Vite 6.4.1 - Build tool and dev server
  • TypeScript 5.8.3 - Type safety
  • Radix UI - Accessible component primitives
  • TanStack Query - Data fetching and state management
  • React Router DOM - Client-side routing
  • Tailwind CSS - Utility-first styling
  • Zod - Schema validation
  • ExcelJS - Report generation

​
3. Configure Environment Variables

Create a .env file in the root directory and configure the required environment variables: 
cp .env.example .env
Edit the .env file with your settings: 
# API Configuration
VITE_API_BASE_URL=https://your-api.com/api/v1
See Environment Setup for detailed configuration options.

​
4. Start the Development Server

Run the development server: 
npm run dev
The application will start on http://localhost:5173 by default.

​
Build for Production

To create an optimized production build: 
npm run build

​
Build Modes

The system supports different build modes: Production Build (default) 
npm run build
  • Optimized for performance
  • Source maps disabled
  • Console logs removed
  • Debug statements stripped
Development Build 
npm run build:dev
  • Includes debugging information
  • Source maps enabled
  • Suitable for testing

​
Preview Production Build

To preview the production build locally: 
npm run preview

​
Code Quality

​
Linting

Run ESLint to check code quality: 
npm run lint

​
TypeScript Configuration

The project uses TypeScript with the following configuration (see tsconfig.json:4-15):
  • Path aliases: @/* maps to ./src/*
  • Relaxed type checking for rapid development
  • Skip library checks for faster compilation
  • Null checks disabled

​
Deployment

The built application can be deployed to any static hosting service:
  1. Build the application: npm run build
  2. Deploy the dist folder to your hosting provider
  3. Configure environment variables on your hosting platform
  • Vercel - Zero-config deployment
  • Netlify - Continuous deployment
  • AWS S3 + CloudFront - Scalable hosting
  • GitHub Pages - Free static hosting

​
Troubleshooting Installation

The Vite dev server uses port 5173 by default. If it’s occupied:
  1. Stop the process using the port
  2. Or modify vite.config.ts:10 to use a different port:
server: {
  host: "::",
  port: 3000, // Change to your preferred port
}
If you encounter module resolution errors:
  1. Delete node_modules and lock files: 
    rm -rf node_modules package-lock.json
  2. Reinstall dependencies: 
    npm install
  3. Clear Vite cache: 
    rm -rf .vite
If you see TypeScript compilation errors:
  1. Ensure you’re using TypeScript 5.8.3 or higher
  2. Check that tsconfig.json includes the correct paths
  3. Restart your IDE/editor
  4. Run npx tsc --noEmit to check for type errors

​
Next Steps

Configuration

Configure the application settings

Environment Setup

Set up development and production environments

User Management

Manage users and authentication

Build docs developers (and LLMs) love

Get started for freeTalk to us