2024 11 25 092502

25 novembre 2024

Introduction#

Dans ce tutoriel, nous allons apprendre à créer un serveur de fichiers avec Node.js. Ce serveur permettra aux utilisateurs de télécharger des fichiers à partir d’un navigateur web.

Technologies utilisées#

Node.js
Express.js
HTML, CSS, JavaScript

Structure du projet#

file-server/
├── index.js
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
└── package.json

Étape 1 : Initialisation du projet#

Créez un dossier file-server et initialisez un projet Node.js :

mkdir file-server
cd file-server
npm init -y

Étape 2 : Installation des dépendances#

Installez Express.js :

npm install express

Étape 3 : Création du serveur#

Créez un fichier index.js dans le dossier racine avec le contenu suivant :

const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;

// Middleware pour servir les fichiers statiques
app.use(express.static(path.join(__dirname, 'public')));

// Route principale
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Démarrer le serveur
app.listen(PORT, () => {
  console.log(`Serveur en cours d'exécution sur le port ${PORT}`);
});

Étape 4 : Création de l’interface utilisateur#

Créez un dossier public et ajoutez les fichiers suivants :

index.html#

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Serveur de fichiers</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Serveur de fichiers</h1>
    <p>Téléchargez vos fichiers depuis ce serveur.</p>
    <a href="/files/example.pdf" class="download-btn">Télécharger example.pdf</a>
  </div>
</body>
</html>

style.css#

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
}

.container {
  text-align: center;
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

h1 {
  margin-bottom: 15px;
  font-size: 2.5em;
  color: #2c3e50;
}

p {
  margin-bottom: 25px;
  font-size: 1.1em;
  color: #555;
}

.download-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #2980b9;
}

script.js#

// Aucun code JavaScript nécessaire pour ce tutoriel simple.
// Vous pouvez l'ajouter plus tard pour des fonctionnalités avancées.

Étape 5 : Ajout de fichiers à télécharger#

Placez vos fichiers (ex. : example.pdf, image.jpg) dans le dossier public/files.

Exemple de structure :

public/
├── files/
│   ├── example.pdf
│   └── image.jpg
├── index.html
├── style.css
└── script.js

Étape 6 : Lancement du serveur#

Exécutez la commande suivante pour démarrer le serveur :

node index.js

Accédez à http://localhost:3000 dans votre navigateur pour voir le serveur en action.

Conclusion#

Vous avez maintenant un serveur de fichiers fonctionnel avec Node.js et Express. Vous pouvez l’étendre avec des fonctionnalités comme le téléchargement de fichiers, l’authentification ou la gestion de fichiers.

Pour plus d’informations, consultez la documentation d’Express.

Avez-vous des questions ? N’hésitez pas à me contacter à l’adresse suivante : contact@example.com.