Qu'est-ce que localhost:8080 ?

Localhost (127.0.0.1) est l'adresse de bouclage (loopback) qui pointe vers votre propre machine. Le port 8080 est un port alternatif au port HTTP standard (80) couramment utilisé pour le développement web local. Quand vous accédez à http://localhost:8080, vous communiquez avec un serveur web qui tourne sur votre propre ordinateur.

Pourquoi le port 8080 plutôt que 80 ?

• Pas besoin de droits administrateur : les ports en dessous de 1024 nécessitent des privilèges root/admin sur la plupart des systèmes.
• Pas de conflit : le port 80 peut être utilisé par Apache, Nginx ou un autre service.
• Convention de développement : 8080 est reconnu comme le port de dev standard.
• Sécurité : séparer le développement du serveur de production éventuel sur le port 80.

Ports courants en développement web

Lancer un serveur local sur le port 8080

Avec PHP (built-in server)

# Serveur PHP intégré
php -S localhost:8080

# Avec un répertoire racine spécifique
php -S localhost:8080 -t ./public

# Avec un router personnalisé
php -S localhost:8080 router.php

Avec Python

# Python 3
python -m http.server 8080

# Python 2 (legacy)
python -m SimpleHTTPServer 8080

# Avec Flask
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return '
Hello World
'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080, debug=True)

Avec Node.js

// Serveur HTTP basique
const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync('./index.html'));
});

server.listen(8080, () => {
    console.log('Serveur sur http://localhost:8080');
});

// Avec Express.js
const express = require('express');
const app = express();

app.use(express.static('public'));
app.listen(8080, () => console.log('http://localhost:8080'));

Avec npx (sans installation)

# Serveur statique rapide
npx serve -p 8080

# Avec live-server (rechargement auto)
npx live-server --port=8080

# Avec http-server
npx http-server -p 8080

Avec les frameworks front-end

# React (Create React App)
PORT=8080 npm start

# Vue.js
vue-cli-service serve --port 8080

# Angular
ng serve --port 8080

# Vite (React, Vue, Svelte)
vite --port 8080

# Next.js
next dev -p 8080

# Nuxt.js
nuxt dev --port 8080

Accéder à localhost depuis un autre appareil

Par défaut, localhost n'est accessible que depuis votre machine. Pour tester sur mobile ou un autre PC du réseau :

# Trouver votre IP locale
# Windows
ipconfig
# Mac / Linux
ifconfig
# ou
hostname -I

# Lancer le serveur sur 0.0.0.0 (toutes les interfaces)
php -S 0.0.0.0:8080
python -m http.server 8080 --bind 0.0.0.0

# Puis accéder depuis l'autre appareil :
# http://192.168.1.XX:8080

Tunneling avec ngrok (partager sur internet)

# Installer ngrok
npm install -g ngrok

# Exposer votre localhost:8080 au monde
ngrok http 8080

# Résultat : une URL publique temporaire
# https://abc123.ngrok.io -> http://localhost:8080

Résolution des problèmes courants

Port 8080 déjà utilisé

# Trouver quel processus utilise le port
# Windows
netstat -ano | findstr :8080
taskkill /PID [numero] /F

# Linux / Mac
lsof -i :8080
kill -9 [PID]

# Ou simplement changer de port
php -S localhost:8081
python -m http.server 8081

ERR_CONNECTION_REFUSED

• Vérifiez que le serveur est bien lancé et écoute sur le bon port.
• Vérifiez le pare-feu (firewall) de votre OS.
• Essayez http://127.0.0.1:8080 au lieu de http://localhost:8080.
• Vérifiez votre fichier hosts (/etc/hosts ou C:\Windows\System32\drivers\etc\hosts).

CORS errors en développement

// Avec Express.js - activer CORS
const cors = require('cors');
app.use(cors());

// Ou manuellement
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

HTTPS en local (localhost avec SSL)

# Avec mkcert (certificats locaux de confiance)
mkcert -install
mkcert localhost 127.0.0.1 ::1

# Résultat : localhost.pem et localhost-key.pem

# Utiliser avec Node.js
const https = require('https');
const fs = require('fs');

const options = {
    key: fs.readFileSync('localhost-key.pem'),
    cert: fs.readFileSync('localhost.pem')
};

https.createServer(options, app).listen(8443);

Environnement de développement complet

Docker Compose pour un stack complet

# docker-compose.yml
version: '3.8'
services:
  web:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./src:/usr/share/nginx/html

  php:
    image: php:8.2-fpm
    volumes:
      - ./src:/var/www/html

  db:
    image: mysql:8
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: myapp

Configuration VS Code pour le développement local

// .vscode/settings.json
{
    "liveServer.settings.port": 8080,
    "liveServer.settings.doNotShowInfoMsg": true,
    "liveServer.settings.doNotVerifyTags": true
}

Bonnes pratiques du développement local

• Documentez votre setup dans un README pour que les autres développeurs puissent démarrer rapidement.
• Utilisez des variables d'environnement pour les URLs (ne hardcodez pas localhost).
• Configurez HTTPS local avec mkcert pour tester les fonctionnalités qui l'exigent.
• Utilisez Docker pour reproduire l'environnement de production localement.
• Testez sur mobile via votre IP locale ou ngrok avant de déployer.

Conclusion

Comprendre localhost et les ports de développement est fondamental pour tout développeur web. Que vous utilisiez PHP, Python, Node.js ou un framework moderne, savoir configurer et dépanner votre serveur local est une compétence essentielle au quotidien.

Chez Tourak Digital, nous maîtrisons tous les environnements de développement. Contactez-nous pour un développement web professionnel.