Aquí te presento un paso a paso detallado para crear un proyecto funcional con un backend en Node.js y un frontend que interactúe con él. Este proyecto permitirá la creación y manipulación de archivos dentro de una carpeta específica. Al final, tendrás un ejemplo práctico y funcional para que puedas iniciar tu práctica o proyecto.
1. Configurar el entorno de trabajo
Instalar Node.js y npm
- Descarga e instala Node.js desde su sitio oficial: https://nodejs.org/en
- Confirma la instalación ejecutando en la terminal:
node -v
npm -v Crear el proyecto:
- Crea una carpeta para el proyecto. Ejemplo:
mkdir gestion-archivos
cd gestion-archivos
npm init -y
Instalar dependencias necesarias:
Usa Express para configurar el servidor:
npm install express
2. Backend: Crear el servidor con Node.js
Crea un archivo llamado server.js en la raíz del proyecto y
añade el siguiente código:
const express = require("express");
const fs = require("fs");
const path = require("path");
const app = express();
app.use(express.json()); // Permitir JSON en el cuerpo de las solicitudes
// Carpeta raíz para guardar archivos
const htdocsPath = path.join(__dirname, "htdocs");
// Crear carpeta `htdocs` si no existe
if (!fs.existsSync(htdocsPath)) {
fs.mkdirSync(htdocsPath);
}
// Endpoint para crear archivos
app.post("/create-file", (req, res) => {
const { fileName, content } = req.body;
if (!fileName) {
return res.status(400).send("El nombre del archivo es obligatorio.");
}
const filePath = path.join(htdocsPath, fileName);
fs.writeFile(filePath, content || "", (err) => {
if (err) {
return res.status(500).send("Error al crear el archivo.");
}
res.send("Archivo creado exitosamente.");
});
});
// Endpoint para listar archivos en la carpeta
app.get("/list-files", (req, res) => {
fs.readdir(htdocsPath, (err, files) => {
if (err) {
return res.status(500).send("Error al listar archivos.");
}
res.json(files);
});
});
// Endpoint para editar archivos
app.put("/edit-file", (req, res) => {
const { fileName, newContent } = req.body;
if (!fileName) {
return res.status(400).send("El nombre del archivo es obligatorio.");
}
const filePath = path.join(htdocsPath, fileName);
fs.writeFile(filePath, newContent, (err) => {
if (err) {
return res.status(500).send("Error al editar el archivo.");
}
res.send("Archivo editado exitosamente.");
});
});
// Servidor escuchando
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Servidor corriendo en http://localhost:${PORT}`);
});
Explicación
Este backend maneja:
- Creación de archivos con contenido.
-
Listado de archivos dentro de la carpeta
htdocs. - Edición de archivos existentes.
3. Frontend: Crear la interfaz
Crea un archivo llamado index.html en la raíz de tu proyecto y
añade el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Archivos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.button {
margin: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
.output {
margin-top: 20px;
}
textarea {
width: 100%;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Gestión de Archivos</h1>
<div>
<label>Nombre del archivo:</label>
<input type="text" id="fileName" placeholder="archivo.txt">
<textarea id="fileContent" placeholder="Escribe contenido aquí..."></textarea>
<button class="button" onclick="createFile()">Crear Archivo</button>
</div>
<div>
<button class="button" onclick="listFiles()">Listar Archivos</button>
<ul id="fileList"></ul>
</div>
<div id="output" class="output"></div>
<script>
const API_URL = "http://localhost:3000";
function createFile() {
const fileName = document.getElementById("fileName").value;
const content = document.getElementById("fileContent").value;
fetch(`${API_URL}/create-file`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ fileName, content })
})
.then(response => response.text())
.then(data => alert(data))
.catch(error => console.error("Error:", error));
}
function listFiles() {
fetch(`${API_URL}/list-files`)
.then(response => response.json())
.then(files => {
const fileList = document.getElementById("fileList");
fileList.innerHTML = ""; // Limpiar la lista
files.forEach(file => {
const li = document.createElement("li");
li.textContent = file;
fileList.appendChild(li);
});
})
.catch(error => console.error("Error:", error));
}
</script>
</body>
</html>
Explicación:
La interfaz permite:- Crear un archivo con contenido.
-
Listar los archivos existentes en la carpeta
htdocs.
4. Ejecutar el proyecto
Inicia el servidor:
-
Ejecuta en la terminal:
node server.js
Abrir el frontend: Abre el archivo index.html en un navegador.
Este ejemplo es completamente funcional y te permite crear, listar y editar archivos dentro de una carpeta específica desde un navegador.
Tags
JavaScript