localhost:3000 vs localhost:5000

Complete comparison guide for two popular development ports: React frontend vs Flask/Express backend servers.

Key Insight: These ports represent two common development setups - frontend React/Next.js on port 3000 and backend Flask/Express on port 5000. Understanding when to use each port helps organize your development environment efficiently.

92%

of React apps default to port 3000

78%

of Flask/Python apps use port 5000

85%

of full-stack devs use this combination

Quick Comparison Table

Feature localhost:3000 localhost:5000
Primary Use Frontend development (React, Next.js) Backend API servers (Flask, Express)
Default Framework React, Next.js, Vue.js, Svelte Flask, Express.js, FastAPI, Rails
Development Context Client-side rendering, UI components REST APIs, database operations, auth
Hot Reload ✅ Yes (built-in) ✅ Yes (with extensions)
Typical Content HTML, CSS, JavaScript bundles JSON responses, API endpoints
Common Commands npm start, yarn dev, next dev flask run, npm start, rails server
Configuration package.json, .env files .env, config files, environment vars
Access Pattern http://localhost:3000 http://localhost:5000/api/data

localhost:3000 - Frontend Development Server

When You See 3000:

  • React applications (Create React App defaults to 3000)
  • Next.js development server
  • Vue.js with Vue CLI (sometimes 8080)
  • Modern JavaScript frameworks
  • Development servers with hot reload
  • Frontend prototyping and UI development

Common 3000 Setup Commands

# Start React development server
npm start
# or
yarn start

# Next.js development
npx next dev
# or
npm run dev

# Create React App (defaults to 3000)
npx create-react-app myapp
cd myapp
npm start

# Check if port 3000 is in use
lsof -i :3000  # macOS/Linux
netstat -ano | findstr :3000  # Windows

# Kill process on port 3000
kill -9 $(lsof -t -i:3000)  # macOS/Linux

# Change port for React app
PORT=5000 npm start
# or create .env file with PORT=5000

Troubleshooting 3000 Issues

Port 3000 Already in Use?

Common solutions:

  1. Find what's using port 3000: lsof -i :3000 or sudo lsof -i :3000
  2. Kill the process: kill -9 [PID] (replace [PID] with actual process ID)
  3. Use a different port: Create .env file with PORT=3001
  4. Start with specific port: PORT=3001 npm start
  5. For multiple apps: Use ports 3001, 3002, 3003, etc.

localhost:5000 - Backend API Server

When You See 5000:

  • Flask (Python) development server
  • Express.js (Node.js) applications
  • Ruby on Rails development server
  • FastAPI Python applications
  • API mock servers and backends
  • Various backend frameworks and microservices

Common 5000 Setup Commands

# Flask development server
flask run
# or with specific port
flask run --port=5000

# Express.js server
node app.js
# or with nodemon for auto-reload
npx nodemon app.js

# Python with Flask
python app.py
# if app.py contains: app.run(debug=True, port=5000)

# Check if port 5000 is in use
lsof -i :5000  # macOS/Linux
netstat -ano | findstr :5000  # Windows

# Kill process on port 5000
kill -9 $(lsof -t -i:5000)  # macOS/Linux

# Docker container on 5000
docker run -p 5000:5000 my-api-image

# Change Flask port
# In your app: app.run(debug=True, port=5001)

Troubleshooting 5000 Issues

Port 5000 Already in Use?

Common solutions:

  1. Find the process: sudo lsof -i :5000
  2. Change Flask port: flask run --port=5001
  3. For Express.js: Change app.listen(5001) in your code
  4. Check for AirPlay on macOS: System Preferences > Sharing > uncheck AirPlay Receiver
  5. Use environment variable: export FLASK_RUN_PORT=5001

Development Scenarios

Frontend Dev (3000)

Typical React development setup:

// package.json scripts
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
}
// .env file
PORT=3000
REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_ENV=development

Access at: http://localhost:3000 with hot reload enabled

Backend API (5000)

Typical Flask backend setup:

# app.py
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enable CORS for React frontend

@app.route('/api/data')
def get_data():
    return jsonify({"message": "Hello from Flask!"})

if __name__ == '__main__':
    app.run(debug=True, port=5000)
# requirements.txt
Flask==2.3.0
flask-cors==4.0.0

Access API at: http://localhost:5000/api/data

Which Port Should You Use?

Quick Decision Guide:

  • Use 3000 if: You're developing React, Next.js, Vue, or any frontend application with hot reload
  • Use 5000 if: You're building a backend API with Flask, Express.js, or Python frameworks
  • Use both if: You're doing full-stack development (frontend on 3000, backend on 5000)
  • Alternative ports: Consider 3001, 3002 for multiple frontend apps; 5001, 5002 for multiple backend services
  • Special case: macOS users may need to disable AirPlay on port 5000

Full-Stack Development Setup

The 3000 + 5000 combination is popular for full-stack development. Here's a typical setup:

Frontend (Port 3000):

// React app fetching from Flask backend
import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
  
  return (
    

      
Frontend on port 3000

      
Data from backend: {data?.message}

    

  );
}

Proxy setup in package.json to avoid CORS:

"proxy": "http://localhost:5000"

Backend (Port 5000):

# Flask CORS configuration
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# Configure CORS to allow requests from React frontend
CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route('/api/data')
def get_data():
    return jsonify({
        "message": "Data from Flask backend",
        "status": "success",
        "timestamp": "2024-01-15T10:30:00Z"
    })

if __name__ == '__main__':
    app.run(debug=True, port=5000)

Or in Express.js:

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));

Pro Tip: macOS AirPlay Issue

On macOS, port 5000 is sometimes used by AirPlay Receiver. If you can't use port 5000:

  1. Disable AirPlay: System Preferences > Sharing > uncheck AirPlay Receiver
  2. Use a different port: flask run --port=5001
  3. Check current usage: sudo lsof -i :5000

This is a common issue for Flask developers on macOS that can be easily resolved.

Common Development Workflows

Python/React Stack:

1. Start Flask backend: flask run (port 5000)

2. Start React frontend: npm start (port 3000)

3. Frontend makes API calls to http://localhost:5000/api

4. Both servers restart automatically on code changes

Node.js Full-Stack:

• Express.js backend on port 5000

• React frontend on port 3000

• Single package.json with scripts for both

• Shared TypeScript types between frontend and backend

Production Considerations:

• Frontend: Build with npm run build, serve static files via Nginx

• Backend: Use production server (Gunicorn for Flask, PM2 for Node.js)

• Ports: Typically 80/443 for frontend, 5000+ for backend APIs

• Environment variables for port configuration

Port Conflict Resolution

Change 3000 to another port:

# Method 1: Environment variable
PORT=3001 npm start

# Method 2: .env file
echo "PORT=3001" > .env

# Method 3: Package.json script
"scripts": {
  "start": "PORT=3001 react-scripts start"
}

# Method 4: Next.js
npx next dev -p 3001

Change 5000 to another port:

# Flask
flask run --port=5001
# or
export FLASK_RUN_PORT=5001
flask run

# Express.js
# Change in your app.js:
app.listen(5001, () => {
  console.log('Server running on port 5001');
})

# Python directly
python app.py  # if app.run(port=5001)

Learn more:

Check out our detailed guides for each port:

localhost:3000 localhost:5000 localhost:8000 localhost:8080 localhost:8443 localhost:8888 localhost:9000 localhost:9200