Skip to main content

​
Prerequisites

Before setting up the frontend, ensure you have:
  • Node.js: Version 18.x or higher recommended
  • Package Manager: npm, yarn, or pnpm
  • Git: For version control

​
Installation

Navigate to the frontend directory and install dependencies: 
cd frontend
npm install

​
Dependencies

The frontend uses a modern React stack with the following core dependencies:

​
Core Dependencies

PackageVersionPurpose
react^18.3.1Core React library
react-dom^18.3.1React DOM rendering

​
Development Dependencies

PackageVersionPurpose
vite^6.0.5Build tool and dev server
@vitejs/plugin-react^4.3.4React support for Vite
typescript~5.6.2TypeScript compiler
tailwindcss^3.4.17Utility-first CSS framework
autoprefixer^10.4.20PostCSS plugin for vendor prefixes
postcss^8.4.49CSS transformation tool
eslint^9.17.0Code linting
typescript-eslint^8.18.2TypeScript ESLint support
eslint-plugin-react-hooks^5.0.0React Hooks linting rules
eslint-plugin-react-refresh^0.4.16React Fast Refresh validation

​
Package.json Overview

The package.json file defines the project configuration: 
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

​
Key Configuration

  • type: "module": Enables ES modules support
  • private: true: Prevents accidental publishing to npm
  • TypeScript: Type checking before build with tsc -b

​
Node Version Requirements

The project requires Node.js 18.x or higher. Vite 6.x has dropped support for Node.js versions below 18.

​
Check Your Node Version

node --version
  • Node.js 18.x: Minimum supported version
  • Node.js 20.x: LTS (Long Term Support) - Recommended
  • Node.js 22.x: Latest stable version

​
Using Node Version Managers

# Install Node 20 LTS
nvm install 20
nvm use 20

# Set as default
nvm alias default 20

​
Project Structure

After installation, your frontend directory structure looks like: 
frontend/
├── src/
│   ├── App.tsx           # Main application component
│   ├── main.tsx          # Application entry point
│   ├── index.css         # Global styles with Tailwind directives
│   └── vite-env.d.ts     # Vite type definitions
├── public/               # Static assets
├── node_modules/         # Installed dependencies
├── package.json          # Project dependencies and scripts
├── tsconfig.json         # Root TypeScript configuration
├── tsconfig.app.json     # App-specific TypeScript config
├── tsconfig.node.json    # Node-specific TypeScript config
├── vite.config.ts        # Vite configuration
├── tailwind.config.js    # TailwindCSS configuration
├── postcss.config.js     # PostCSS configuration
├── eslint.config.js      # ESLint configuration
└── index.html            # HTML entry point

​
Verification

Verify your setup by running the development server: 
npm run dev
You should see output indicating the dev server is running, typically on http://localhost:5173.

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port (5174, 5175, etc.).

​
Module Not Found Errors

If you encounter module resolution errors: 
rm -rf node_modules package-lock.json
npm install

​
TypeScript Errors

Clear TypeScript build cache: 
rm -rf node_modules/.tmp

​
Next Steps

Development

Learn how to run the dev server and build the application

Configuration

Explore Vite, TypeScript, and TailwindCSS configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us