Desarrolla una aplicación full stack: la guía práctica
En este tutorial, te llevaré paso a paso a través del proceso de desarrollar una aplicación full stack. Una aplicación full stack es aquella que utiliza tanto el frontend como el backend para proporcionar una experiencia completa al usuario.
Para este tutorial, usaremos HTML para el frontend y Node.js para el backend. Comencemos.
Paso 1: Configurar el proyecto
Lo primero que debes hacer es crear una carpeta para tu proyecto y abrir una terminal en esa ubicación. Luego, puedes iniciar un proyecto de Node.js ejecutando el siguiente comando:
npm init -yEsto creará un archivo package.json en el que puedes especificar todas las dependencias de tu proyecto.
Paso 2: Crear el servidor
Para crear el servidor de tu aplicación, es necesario instalar Express, un framework web para Node.js. Puedes hacerlo ejecutando el siguiente comando en la terminal:
npm install expressUna vez que hayas instalado Express, puedes crear un archivo app.js en la raíz de tu proyecto y escribir el siguiente código:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('¡Hola mundo!');
});
app.listen(3000, () => {
console.log('Servidor escuchando en el puerto 3000');
});Este código crea un servidor web en el puerto 3000 que responde con "¡Hola mundo!" al acceder a la ruta raíz.
Paso 3: Crear el frontend
Para el frontend de tu aplicación, crearás un archivo HTML básico. Crea un archivo index.html en la raíz de tu proyecto y escribe el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Aplicación Full Stack</title>
</head>
<body>
<h1>¡Hola mundo desde el frontend!</h1>
</body>
</html>Paso 4: Conectar el frontend con el backend
Para conectar el frontend con el backend, necesitarás configurar Express para servir los archivos estáticos de la carpeta donde se encuentra tu archivo HTML. Puedes hacerlo agregando las siguientes líneas de código a tu archivo app.js:
app.use(express.static('public'));Luego, mueve tu archivo index.html a una carpeta llamada public en la raíz de tu proyecto.
Paso 5: Ejecutar la aplicación
Finalmente, para ejecutar tu aplicación, simplemente ejecuta el siguiente comando en la terminal:
node app.jsEsto iniciará tu servidor Express y podrás acceder a tu aplicación en el navegador visitando http://localhost:3000.
¡Y eso es todo! Has desarrollado con éxito una aplicación full stack utilizando HTML para el frontend y Node.js para el backend. ¡Felicitaciones!
Chile.
Colombia