localhost:3000

http://localhost:3000

Port 3000 is the default development server port for React (Create React App), Express.js, Node.js applications, Gatsby, Meteor, and many JavaScript frameworks. It's the most common port for frontend and full-stack JavaScript development.

→ Open localhost:3000

What Runs on Port 3000?

  • React (Create React App) - Default development server port
  • Express.js - Node.js web application framework
  • Node.js Applications - Common convention for Node apps
  • Gatsby - React-based static site generator
  • Next.js - React framework (default port)
  • Meteor - Full-stack JavaScript platform
  • Grafana - Analytics and monitoring dashboards
  • Ruby on Rails - Sometimes uses port 3000
  • Remix - Full stack React framework
  • Docusaurus - Documentation site generator
  • Strapi - Headless CMS
  • JSON Server - Mock REST API

Start Development Servers on Port 3000

React (Create React App)

# Create new React app npx create-react-app my-app cd my-app # Start development server npm start # Server starts on http://localhost:3000 # Browser opens automatically # Hot reload enabled - changes refresh instantly

Express.js Server

// server.js const express = require('express'); const app = express(); const PORT = 3000; app.get('/', (req, res) => { res.send('<h1>Express Server on Port 3000</h1>'); }); app.get('/api/data', (req, res) => { res.json({ message: 'API endpoint', port: 3000 }); }); app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}`); }); // Run: node server.js

Node.js HTTP Server

// server.js const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('<h1>Node.js Server on Port 3000</h1>'); }); server.listen(3000, 'localhost', () => { console.log('Server running at http://localhost:3000/'); }); // Run: node server.js

Next.js Application

# Create Next.js app npx create-next-app@latest my-next-app cd my-next-app # Start development server npm run dev # Server starts at http://localhost:3000

Gatsby Static Site

# Install Gatsby CLI npm install -g gatsby-cli # Create new Gatsby site gatsby new my-gatsby-site cd my-gatsby-site # Start development server gatsby develop # Server starts at http://localhost:8000 # GraphQL playground at http://localhost:8000/___graphql

Grafana Dashboard

# Install Grafana # Linux sudo systemctl start grafana-server # Access at http://localhost:3000 # Default login: admin / admin

Change React Default Port from 3000

Temporary Port Change

# Windows Command Prompt set PORT=3001 && npm start # Windows PowerShell $env:PORT=3001; npm start # Linux/Mac PORT=3001 npm start # Using cross-env (works on all platforms) npx cross-env PORT=3001 npm start

Permanent Port Change in package.json

// package.json { "scripts": { "start": "PORT=3001 react-scripts start", "start:win": "set PORT=3001 && react-scripts start" } } // Or use cross-env for cross-platform { "scripts": { "start": "cross-env PORT=3001 react-scripts start" } } // Install cross-env npm install --save-dev cross-env

Create .env File

# .env file in project root PORT=3001 # React will read this automatically # Run: npm start

Fix "Port 3000 Already in Use"

Error: Something is already running on port 3000

This error occurs when another process is using port 3000.

  • Another dev server is running
  • Zombie process from previous run
  • Different project using port 3000
  • Background Node.js process
  • VS Code terminal not fully closed

Would you like to run on another port? (React)

Create React App asks if you want to use a different port:

  • Press Y to run on port 3001
  • Press N to cancel and kill process on 3000

Find and Kill Process on Port 3000

Windows

# Find process using port 3000 netstat -ano | findstr :3000 # Kill process by PID taskkill /PID [PID_NUMBER] /F # Example # netstat shows PID 12345 taskkill /PID 12345 /F # Kill all node processes (use with caution) taskkill /IM node.exe /F

Linux/Mac

# Find process on port 3000 lsof -i :3000 sudo lsof -i :3000 # Kill process by PID kill -9 [PID] # Kill process on port 3000 directly lsof -ti:3000 | xargs kill -9 sudo lsof -ti:3000 | xargs kill -9 # Alternative with fuser sudo fuser -k 3000/tcp

Using npx kill-port

# Install globally npm install -g kill-port # Kill process on port 3000 npx kill-port 3000 # Kill multiple ports npx kill-port 3000 3001 3002

Check if Port 3000 is in Use

# Windows netstat -ano | findstr :3000 # Linux/Mac lsof -i :3000 netstat -an | grep 3000 ss -tulpn | grep 3000 # Check all listening ports netstat -an | grep LISTEN # Windows PowerShell Test-NetConnection -ComputerName localhost -Port 3000

React Development Server Features

  • Hot Module Replacement (HMR) - Changes reflect instantly without full reload
  • Fast Refresh - Preserves component state during edits
  • Error Overlay - Shows compile and runtime errors in browser
  • Auto-open Browser - Automatically opens localhost:3000
  • Network Access - Shows local and network URLs
  • HTTPS Support - Set HTTPS=true in .env file

Access React App from Other Devices

# Allow network access # React shows network URL when starting # Windows - Find your IP ipconfig # Look for "IPv4 Address" # Linux/Mac - Find your IP ifconfig ip addr show # Access from phone/tablet on same network # http://192.168.1.100:3000 # Or set HOST in .env HOST=0.0.0.0 PORT=3000 # This allows access from any device on network

Enable HTTPS on React Dev Server

# Create .env file HTTPS=true # Or start with HTTPS flag # Windows set HTTPS=true && npm start # Linux/Mac HTTPS=true npm start # Access at: https://localhost:3000 # Browser will show certificate warning (normal for development) # Click "Advanced" > "Proceed to localhost"

Express.js Advanced Configuration

// app.js - Full Express setup const express = require('express'); const cors = require('cors'); const app = express(); const PORT = process.env.PORT || 3000; // Middleware app.use(cors()); // Allow cross-origin requests app.use(express.json()); // Parse JSON bodies app.use(express.static('public')); // Serve static files // Routes app.get('/', (req, res) => { res.json({ message: 'API is running on port 3000' }); }); app.get('/api/users', (req, res) => { res.json([ { id: 1, name: 'User 1' }, { id: 2, name: 'User 2' } ]); }); app.post('/api/data', (req, res) => { console.log(req.body); res.status(201).json({ success: true, data: req.body }); }); // Error handling app.use((err, req, res, next) => { console.error(err.stack); res.status(500).json({ error: 'Something went wrong!' }); }); // Start server app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); // Run: node app.js // Install dependencies: npm install express cors

Configure Firewall for Port 3000

Windows Firewall

# Allow port 3000 netsh advfirewall firewall add rule name="Node Dev Port 3000" dir=in action=allow protocol=TCP localport=3000 # Remove rule netsh advfirewall firewall delete rule name="Node Dev Port 3000"

Linux Firewall (UFW)

# Allow port 3000 sudo ufw allow 3000/tcp # Check status sudo ufw status # Remove rule sudo ufw delete allow 3000/tcp

Common Port 3000 Issues

React app won't start - port 3000 busy

  • Kill process using port 3000
  • Choose different port when prompted
  • Check for zombie Node processes
  • Restart terminal or IDE
  • Reboot computer if persistent

Cannot access localhost:3000 from other devices

  • Set HOST=0.0.0.0 in .env file
  • Check firewall allows port 3000
  • Ensure devices on same network
  • Use computer's IP address, not localhost
  • Disable VPN if active

Hot reload not working

  • Check file watcher limits on Linux
  • Increase max_user_watches: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
  • Save files properly (some editors need explicit save)
  • Restart development server

Run Multiple Projects on Different Ports

# Project 1 on port 3000 cd project1 PORT=3000 npm start # Project 2 on port 3001 cd project2 PORT=3001 npm start # Project 3 on port 3002 cd project3 PORT=3002 npm start # Backend API on port 3001, Frontend on 3000 # Common separation pattern

Proxy API Requests in React

// package.json - Proxy backend API { "proxy": "http://localhost:3001" } // Now API requests go through proxy // Frontend: http://localhost:3000 // Backend: http://localhost:3001 // In React component fetch('/api/users') // Proxied to http://localhost:3001/api/users .then(res => res.json()) .then(data => console.log(data));
Development Tip: Port 3000 is for development only. Production applications should run on standard ports (80 for HTTP, 443 for HTTPS) behind a proper web server like Nginx or Apache.

Frequently Asked Questions

Why is port 3000 the default for React?

Port 3000 became a convention in the Node.js/JavaScript ecosystem. It's above privileged ports (1-1024), easy to remember, and unlikely to conflict with other services.

Can I use port 3000 for production?

Not recommended. Production apps should use standard HTTP (80) or HTTPS (443) ports behind a reverse proxy. Port 3000 is intended for local development.

How do I permanently change React port?

Create .env file with PORT=3001 in your project root, or modify package.json scripts to include PORT environment variable.

Why does React ask about running on different port?

When port 3000 is busy, Create React App automatically detects this and offers to run on next available port (3001, 3002, etc.).

What's the difference between localhost:3000 and 0.0.0.0:3000?

localhost (127.0.0.1) only allows connections from same machine. 0.0.0.0 allows connections from any device on network, useful for testing on phones/tablets.

Related Ports and Resources