TROUBLESHOOT_LOCALHOST.md

Troubleshooting Localhost Preview Issues

Quick Fixes

1. Check if Server is Running

Open your browser and go to: http://localhost:3000

If you see "This site can't be reached":

• The server isn't running
• Try the solutions below

2. Start the Server

Option A: Use the Batch File (Easiest)

• Double-click start.bat in the project folder
• Wait for the browser to open automatically

Option B: Use Command Line

1. Open PowerShell or Command Prompt in this folder
2. Run: npm run dev
3. Look for: Local: http://localhost:3000
4. Open that URL in your browser

Option C: Use VS Code

1. Open this folder in VS Code
2. Press Ctrl + ` (backtick) to open terminal
3. Type: npm run dev
4. Click the localhost link that appears

3. Port Already in Use?

If you see "Port 3000 is already in use":

Solution 1: Use a Different Port

• Edit vite.config.ts
• Change port: 3000 to port: 3001 (or any other port)
• Restart the server

Solution 2: Kill the Process Using Port 3000

# Find the process
netstat -ano | findstr :3000

# Kill it (replace PID with the number from above)
taskkill /PID <PID> /F

4. Dependencies Not Installed?

If you see errors about missing modules:

npm install

5. TypeScript/Build Errors?

Check for compilation errors:

npm run build

If there are errors, they'll be shown. Fix them and try again.

6. Clear Cache and Restart

Sometimes cached files cause issues:

# Delete node_modules and reinstall
rm -r node_modules
npm install
npm run dev

Or on Windows:

Remove-Item -Recurse -Force node_modules
npm install
npm run dev

Common Error Messages

"Cannot find module"

→ Run npm install

"Port 3000 is already in use"

→ Change port in vite.config.ts or kill the process using port 3000

"node: command not found"

→ Node.js is not installed. Install from https://nodejs.org/

"npm: command not found"

→ Node.js is not installed correctly. Reinstall Node.js.

Browser shows blank page

→ Check browser console (F12) for errors → Make sure the server is actually running → Try hard refresh (Ctrl+F5)

Still Not Working?

1. Check Node.js Version

   node --version

   Should be v16 or higher

2. Check npm Version

   npm --version

3. Verify Files Exist

   • Make sure src/main.tsx exists
   • Make sure index.html exists
   • Make sure package.json exists

4. Try Alternative Port

   • Edit vite.config.ts
   • Change port to 5173 (Vite default)
   • Access at http://localhost:5173

Quick Test

Run this to verify everything is set up:

node --version
npm --version
npm list --depth=0

All should complete without errors.