Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js >= 14.0.0
  • npm (comes with Node.js)
You can verify your Node.js version: 
node --version

​
Clone and Install

Clone the repository and install dependencies: 
git clone https://github.com/aduncandev/web-xp.git
cd web-xp
npm install
The project uses the following key dependencies:
  • react (^18.3.1) - UI framework
  • styled-components (^6.1.14) - CSS-in-JS styling
  • vite (^6.2.0) - Build tool and dev server
  • webamp (^1.3.2-beta.2) - Winamp player
  • react-use (^17.6.0) - React hooks library

​
Development Workflow

​
Start Development Server

Run the Vite development server: 
npm start
This will:
  • Start the dev server at http://localhost:3000
  • Automatically open your browser
  • Enable hot module replacement (HMR) for instant updates
The dev server is configured with:
  • Port: 3000
  • Auto-open browser: true
  • Custom middleware for serving public HTML files

​
Path Aliases

Vite is configured with path aliases for convenient imports: 
import MyComponent from 'components/MyComponent';
import myHook from 'hooks/myHook';
import myAsset from 'assets/myAsset.png';
import WinXPComponent from 'WinXP/WinXPComponent';
import { VolumeProvider } from 'context/VolumeContext';
Available aliases:
  • assets → src/assets
  • components → src/components
  • hooks → src/hooks
  • context → src/context
  • WinXP → src/WinXP

​
Build and Preview

​
Production Build

Create an optimized production build: 
npm run build
This generates static files in the dist/ directory, ready for deployment.

​
Preview Production Build

Test the production build locally: 
npm run preview
This serves the dist/ directory to verify the production build works correctly.

​
Linting with ESLint

The project uses ESLint with Prettier integration for code quality: 
npm run lint

​
ESLint Configuration

The project extends:
  • react-app - React-specific linting rules
  • plugin:prettier/recommended - Prettier integration

​
Prettier Configuration

Code formatting rules (.prettierrc): 
{
  "trailingComma": "all",
  "singleQuote": true
}

​
Browser Support

The project targets:
  • >0.2% - Browsers with >0.2% market share
  • not dead - Actively maintained browsers
  • not ie <= 11 - No Internet Explorer 11 or below
  • not op_mini all - No Opera Mini

​
Troubleshooting

​
Port Already in Use

If port 3000 is already in use, Vite will automatically try the next available port. You can also manually specify a port in vite.config.js.

​
Module Not Found

If you encounter module resolution errors:
  1. Clear your node_modules and reinstall: 
    rm -rf node_modules package-lock.json
npm install
  2. Verify path aliases in vite.config.js match your imports

​
HMR Not Working

If hot module replacement isn’t working:
  1. Check that your components are exported properly
  2. Restart the dev server
  3. Clear browser cache

Build docs developers (and LLMs) love

Get started for freeTalk to us