Bienvenido a la Guía Interactiva MERN
🚀 Introducción al Stack MERN
Bienvenido a esta guía completa para convertirte en un desarrollador Full Stack con el stack MERN. MERN es un acrónimo de las cuatro tecnologías clave que componen este conjunto: MongoDB, Express.js, React y Node.js. Juntas, proporcionan un marco de trabajo de extremo a extremo para construir aplicaciones web modernas, escalables y de alto rendimiento, utilizando JavaScript en todo el proceso.
¿Por qué elegir MERN?
- JavaScript en todo: Utilizar un solo lenguaje (JavaScript) tanto en el frontend como en el backend simplifica el desarrollo, reduce la curva de aprendizaje y permite una mejor reutilización de código y recursos entre el equipo.
- Alto rendimiento: Node.js es conocido por su arquitectura asíncrona y no bloqueante, lo que lo hace ideal para aplicaciones que manejan muchas conexiones simultáneas.
- Flexibilidad de base de datos: MongoDB es una base de datos NoSQL orientada a documentos, lo que permite almacenar datos en formato JSON flexible (llamado BSON). Esto facilita la evolución del esquema de datos a medida que la aplicación crece.
- UI modernas y reactivas: React es una de las bibliotecas de JavaScript más populares para construir interfaces de usuario interactivas y dinámicas, basadas en componentes reutilizables.
- Comunidad y ecosistema: Cada una de estas tecnologías cuenta con una comunidad masiva y activa, lo que se traduce en una gran cantidad de tutoriales, librerías, herramientas y soporte gratuito.
Arquitectura de una Aplicación MERN
Para entender cómo funcionan juntas estas tecnologías, explora el siguiente diagrama interactivo. Pasa el cursor sobre cada componente para ver su rol en el ciclo de una solicitud web.
🌐 Usuario (Navegador)
🎨 React.js (Frontend)
⚙️ Node.js + Express.js (Backend)
🗃️ MongoDB (Base de Datos)
Esta guía está estructurada en fases progresivas. Te recomendamos seguirlas en orden para construir una base de conocimiento sólida. ¡Comencemos el viaje!
🧱 Fase 1: Fundamentos del Desarrollo Web
Antes de sumergirnos en el stack MERN, es crucial tener una base sólida en las tecnologías fundamentales de la web. Si ya tienes experiencia con estos temas, puedes usarlos como un repaso. Si eres nuevo, dedícale tiempo a cada uno de ellos, ya que son la base sobre la que construirás todo lo demás.
HTML5 (HyperText Markup Language)
HTML es el esqueleto de cualquier página web. Define la estructura y el contenido semántico. No necesitas ser un experto, pero debes dominar:
- Estructura básica:
<!DOCTYPE>,<html>,<head>, y<body>. - Etiquetas semánticas:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>. Usarlas correctamente mejora el SEO y la accesibilidad. - Formularios:
<form>,<input>(con sus diferentes tipos: text, password, email, number, checkbox, radio),<textarea>,<button>,<label>. - Listas, tablas y enlaces:
<ul>,<ol>,<li>,<table>,<a>.
Recurso gratuito recomendado: MDN Web Docs - HTML.
CSS3 (Cascading Style Sheets)
CSS es el lenguaje que usamos para dar estilo y diseñar el HTML. Hace que las aplicaciones se vean bien y sean responsivas.
- Selectores: Entender cómo seleccionar elementos por etiqueta, clase, ID, atributos y pseudo-clases.
- Modelo de caja (Box Model): Entender
margin,border,padding, ycontentes fundamental. - Flexbox y Grid: Son los sistemas modernos para crear layouts complejos y responsivos. Domina ambos.
- Diseño Responsivo: Uso de Media Queries para adaptar el diseño a diferentes tamaños de pantalla (móvil, tablet, escritorio).
- Conceptos básicos: Colores, fuentes, posicionamiento (static, relative, absolute, fixed, sticky), especificidad.
Recurso gratuito recomendado: freeCodeCamp - Responsive Web Design.
JavaScript (ECMAScript 6+)
Este es el lenguaje de programación que da vida a tus aplicaciones. Es el corazón del stack MERN. Dedica la mayor parte de tu tiempo aquí.
- Fundamentos: Variables (
var,let,const), tipos de datos, operadores, estructuras de control (if/else, switch, bucles). - Funciones: Declaración, expresiones, funciones de flecha (arrow functions).
- Arrays y Objetos: Métodos de arrays (
map,filter,reduce,forEach), desestructuración de objetos y arrays. - Programación Asíncrona: El concepto más importante para Node.js. Entiende Callbacks, Promesas (
.then(),.catch()) y, especialmente, Async/Await. - DOM (Document Object Model): Cómo seleccionar y manipular elementos HTML con JavaScript.
- Módulos ES6:
importyexportpara organizar tu código.
Recurso gratuito recomendado: The Modern JavaScript Tutorial.
Control de Versiones con Git y GitHub
Git es una herramienta indispensable para cualquier desarrollador. Te permite llevar un registro de los cambios en tu código, colaborar con otros y volver a versiones anteriores si algo sale mal. GitHub es una plataforma para alojar tus repositorios de Git.
- Comandos básicos:
git init,git add,git commit,git status,git push,git pull,git clone. - Ramas (Branching): Crear y fusionar ramas (
git branch,git checkout,git merge). Es el flujo de trabajo estándar en equipos. - GitHub Flow: Entender el proceso de crear un repositorio, clonarlo, hacer cambios en una rama, abrir un Pull Request y fusionarlo.
Recurso gratuito recomendado: Pro Git (libro oficial).
⚙️ Fase 2: Backend con Node.js y Express.js
Una vez que tienes los fundamentos, es hora de construir el cerebro de tu aplicación: el backend. Aquí es donde se procesa la lógica de negocio, se interactúa con la base de datos y se expone una API para que el frontend la consuma.
Node.js: JavaScript en el Servidor
Node.js es un entorno de ejecución de JavaScript que nos permite ejecutar código JS fuera del navegador. Su principal característica es su modelo de I/O (Entrada/Salida) asíncrono y no bloqueante, lo que lo hace muy eficiente para aplicaciones web.
Conceptos Clave de Node.js:
- Event Loop: El corazón de Node.js. Entender cómo maneja operaciones asíncronas sin bloquear el hilo principal es crucial.
- Módulos Nativos: Node.js viene con módulos integrados para trabajar con el sistema de archivos (
fs), rutas (path), y redes (http). - NPM (Node Package Manager): El gestor de paquetes de Node.js. Aprende a usarlo para instalar, actualizar y gestionar las dependencias de tu proyecto (
npm install,npm init,package.json). - Variables de Entorno: Una práctica de seguridad fundamental. Nunca guardes información sensible (como claves de API o credenciales de base de datos) directamente en el código. Usa archivos
.envy un paquete comodotenvpara cargarlas.
Express.js: El Framework para construir APIs
Express.js es un framework minimalista y flexible para Node.js que simplifica enormemente la creación de servidores web y APIs RESTful. Es el framework web más popular para Node.js.
Primeros pasos con Express.js
1. Inicializa tu proyecto y instala Express:
mkdir mi-api
cd mi-api
npm init -y
npm install express2. Crea tu primer servidor (archivo index.js):
const express = require('express');
const app = express();
const port = 3000;
// Middleware para parsear JSON en el cuerpo de las solicitudes
app.use(express.json());
// Definir una ruta GET de ejemplo
app.get('/', (req, res) => {
res.send('¡Hola, mundo desde Express!');
});
// Definir una ruta POST de ejemplo
app.post('/api/data', (req, res) => {
console.log(req.body); // El cuerpo de la solicitud JSON
res.status(201).json({
message: 'Datos recibidos con éxito',
data: req.body
});
});
// Iniciar el servidor
app.listen(port, () => {
console.log(`Servidor escuchando en http://localhost:${port}`);
});3. Ejecuta el servidor:
node index.jsAhora puedes visitar http://localhost:3000 en tu navegador o enviar una solicitud POST a http://localhost:3000/api/data con un cuerpo JSON usando herramientas como Postman o curl.
Conceptos Clave de Express.js:
- Enrutamiento (Routing): Cómo definir las rutas (endpoints) de tu API para diferentes métodos HTTP (
GET,POST,PUT,DELETE) usandoapp.get(),app.post(), etc. - Middleware: Son funciones que se ejecutan en el medio del ciclo de solicitud-respuesta. Se usan para tareas como validación, autenticación, logging, parseo de cuerpos de solicitud (
express.json()), etc. - Manejo de Errores: Implementar un middleware de manejo de errores centralizado para capturar y responder a los errores de manera consistente.
- API RESTful: Aprende los principios de diseño de APIs REST, incluyendo el uso correcto de los métodos HTTP, códigos de estado y una estructura de URL consistente para los recursos.
Estructura de un Proyecto Backend
A medida que tu aplicación crece, es importante mantener una estructura organizada. Un patrón común es separar la lógica en diferentes carpetas:
/mi-api /node_modules /controllers # Lógica de negocio (qué hacer con la solicitud) /models # Definición de los esquemas de la base de datos /routes # Definición de las rutas de la API .env # Variables de entorno (¡no subir a Git!) .gitignore index.js # Punto de entrada de la aplicación package.json
Esta estructura modular hace que el código sea más fácil de mantener, depurar y escalar.
🗃️ Fase 3: Base de Datos con MongoDB
MongoDB es una base de datos NoSQL, lo que significa que no utiliza el modelo relacional tradicional de tablas, filas y columnas. En su lugar, almacena los datos en documentos flexibles, similares a JSON, dentro de colecciones. Esto la hace muy intuitiva para trabajar con JavaScript.
Conceptos Clave de MongoDB
- Documentos: Son la unidad básica de datos en MongoDB, análogos a un objeto JSON. Tienen una estructura de pares clave-valor.
- Colecciones: Son un conjunto de documentos. Serían el equivalente a una tabla en una base de datos SQL.
- BSON (Binary JSON): Es una versión binaria y extendida de JSON que MongoDB utiliza para almacenar los datos. Soporta más tipos de datos que JSON.
- Mongoose: Es una librería de modelado de datos de objetos (ODM) para MongoDB y Node.js. Simplifica la interacción con la base de datos al proporcionar una capa de abstracción sobre el driver nativo. Permite definir esquemas, validaciones y lógica de negocio a nivel de modelo. Es el estándar de facto en el ecosistema MERN.
Instalación de MongoDB Community Server
La instalación de MongoDB varía según tu sistema operativo. A continuación, encontrarás guías detalladas para Windows, Ubuntu y Arch Linux. Selecciona tu sistema operativo para ver las instrucciones.
Instalación en Windows
- Descargar el instalador: Ve a la página oficial de MongoDB Community Server. Selecciona la versión "MSI", tu versión de Windows y haz clic en "Download".
- Ejecutar el instalador: Abre el archivo
.msidescargado. Sigue las instrucciones del asistente. - Seleccionar instalación "Complete": En la mayoría de los casos, la opción "Complete" es la adecuada.
- Configuración del servicio: Asegúrate de que la opción "Install MongoDB as a Service" esté marcada. Esto hará que MongoDB se inicie automáticamente con tu sistema. Deja los nombres de directorios por defecto.
- Instalar MongoDB Compass (Opcional pero recomendado): El instalador te ofrecerá instalar MongoDB Compass. Es una GUI (Interfaz Gráfica de Usuario) muy útil para visualizar y gestionar tu base de datos. Se recomienda instalarla.
- Finalizar la instalación: Haz clic en "Install" y espera a que el proceso termine.
- Verificación: Abre el Administrador de Tareas, ve a la pestaña "Servicios" y busca "MongoDB Server". Debería estar en estado "En ejecución". También puedes abrir MongoDB Compass y conectarte a la instancia local por defecto (
mongodb://localhost:27017).
Conectando Node.js a MongoDB con Mongoose
Una vez que MongoDB está instalado y en ejecución, puedes conectar tu aplicación de Node.js usando Mongoose.
1. Instala Mongoose:
npm install mongoose2. Conéctate a la base de datos y define un modelo:
const mongoose = require('mongoose');
// URL de conexión (mongodb://localhost:27017/nombreDeTuDB)
const dbURI = 'mongodb://localhost:27017/miAppMERN';
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Conectado a MongoDB'))
.catch(err => console.error('Error al conectar a MongoDB', err));
// Definir un esquema (la estructura de los documentos)
const userSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: Number,
createdAt: { type: Date, default: Date.now }
});
// Crear un modelo a partir del esquema
const User = mongoose.model('User', userSchema);
// Ahora puedes usar el modelo `User` para crear, leer, actualizar y eliminar usuarios.
module.exports = User;
Este código establece la conexión con la base de datos y define un "molde" (esquema) para los documentos de usuario. El modelo `User` es la interfaz que usarás en tus controladores para interactuar con la colección de usuarios.
🎨 Fase 4: Frontend con React
React es una biblioteca de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Te permite componer UIs complejas a partir de pequeñas piezas aisladas de código llamadas "componentes".
Creando tu primera aplicación de React
La forma más sencilla y recomendada de iniciar un proyecto de React es usando una herramienta como Vite.
# Instala Vite globalmente (si no lo tienes) o usa npx
npm create vite@latest mi-app-react -- --template react
cd mi-app-react
npm install
npm run devEsto creará un nuevo proyecto de React con todo lo necesario para empezar y lanzará un servidor de desarrollo en http://localhost:5173 (o un puerto similar).
Conceptos Fundamentales de React
- Componentes: Son funciones de JavaScript (o clases) que retornan elementos de React (JSX). Son los bloques de construcción de tu aplicación. Hay dos tipos: componentes de función (los más modernos y recomendados) y componentes de clase.
- JSX (JavaScript XML): Es una extensión de la sintaxis de JavaScript que te permite escribir HTML dentro de tu código JavaScript. Facilita la creación y visualización de la estructura de tus componentes.
- Props (Propiedades): Son la forma de pasar datos de un componente padre a un componente hijo. Son de solo lectura.
- State (Estado): Es un objeto que contiene datos que pueden cambiar con el tiempo dentro de un componente. Cuando el estado de un componente cambia, React vuelve a renderizar ese componente para reflejar los nuevos datos.
Hooks de React
Los Hooks son funciones que te permiten "engancharte" a las características de React desde componentes de función. Son la forma moderna de manejar el estado y los efectos secundarios.
useState: El hook más básico y común. Te permite añadir estado a tus componentes de función. Retorna un valor y una función para actualizarlo.useEffect: Te permite ejecutar "efectos secundarios" en tus componentes. Algunos ejemplos son: hacer peticiones a una API, suscribirse a eventos, o manipular el DOM directamente. Se ejecuta después de cada renderizado.useContext: Permite acceder a un "contexto" global sin tener que pasar props a través de múltiples niveles de componentes (evita el "prop drilling").
Ejemplo: Un componente simple con estado y efecto
Este ejemplo muestra un contador y cómo hacer una petición a una API cuando el componente se monta.
import React, { useState, useEffect } from 'react';
function DataFetcher() {
// Estado para el contador
const [count, setCount] = useState(0);
// Estado para guardar los datos de la API
const [data, setData] = useState(null);
// Estado para manejar el estado de carga
const [loading, setLoading] = useState(true);
// useEffect para hacer la petición a la API una sola vez, cuando el componente se monta
useEffect(() => {
// Definimos una función asíncrona dentro del efecto
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // El array de dependencias vacío [] significa que este efecto se ejecuta solo una vez
return (
<div>
<h1>Contador y Fetch de Datos</h1>
<p>Has hecho clic {count} veces</p>
<button onClick={() => setCount(count + 1)}>
Haz clic aquí
</button>
<div className="data-section">
<h2>Datos de la API</h2>
{loading ? (
<p>Cargando...</p>
) : (
<pre>{JSON.stringify(data, null, 2)}</pre>
)}
</div>
</div>
);
}
export default DataFetcher;
🧩 Fase 5: Integración y Proyecto Completo
En esta fase, unimos todas las piezas. El frontend de React se comunicará con el backend de Express para realizar operaciones CRUD (Crear, Leer, Actualizar, Borrar) en la base de datos MongoDB. El flujo típico es:
- El usuario realiza una acción en la interfaz de React (ej. hace clic en "Guardar Tarea").
- El componente de React hace una petición HTTP (ej. un
POSTa/api/tareas) a nuestro servidor Express. Usualmente se usa la APIfetcho una librería comoaxios. - La ruta de Express correspondiente recibe la petición.
- El controlador de Express procesa la petición, interactúa con el modelo de Mongoose para guardar los datos en MongoDB.
- El servidor Express envía una respuesta al cliente (ej. un JSON con la tarea recién creada y un código de estado 201).
- El cliente de React recibe la respuesta, actualiza su estado y la interfaz de usuario refleja el cambio.
Configurando la Comunicación (CORS)
Por defecto, los navegadores aplican la "Same-Origin Policy", que impide que una página web (ej. http://localhost:5173) haga peticiones a un dominio diferente (ej. http://localhost:3000). Para permitir esta comunicación en desarrollo, necesitas habilitar CORS (Cross-Origin Resource Sharing) en tu backend de Express.
1. Instala el paquete cors:
# En la carpeta de tu backend
npm install cors2. Úsalo como middleware en tu archivo principal del servidor (index.js):
const express = require('express');
const cors = require('cors'); // Importar cors
const app = express();
// Opciones de CORS (en producción, sé más restrictivo)
const corsOptions = {
origin: 'http://localhost:5173', // La URL de tu app de React
optionsSuccessStatus: 200
};
app.use(cors(corsOptions)); // Usar el middleware de cors
app.use(express.json());
// ... resto de tus rutas y configuración ...
app.listen(3000, () => {
console.log('Servidor escuchando en el puerto 3000');
});
Ejemplo: Obtener datos del Backend en React
Supongamos que tu backend tiene una ruta GET /api/users que devuelve una lista de usuarios. Así es como la consumirías desde un componente de React:
import React, { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUsers = async () => {
try {
// La URL completa de tu endpoint del backend
const response = await fetch('http://localhost:3000/api/users');
if (!response.ok) {
throw new Error('La respuesta de la red no fue exitosa');
}
const data = await response.json();
setUsers(data);
} catch (error) {
setError(error.message);
}
};
fetchUsers();
}, []);
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>Lista de Usuarios</h1>
<ul>
{users.map(user => (
<li key={user._id}>{user.name} - {user.email}</li>
))}
</ul>
</div>
);
}
export default UserList;
Proyecto de Ejemplo: Lista de Tareas
Construir una aplicación de lista de tareas (To-Do list) es un excelente proyecto para solidificar tus conocimientos MERN.
- Backend (Express/MongoDB):
- Modelo
Taskcon campos comotitle(String),description(String),completed(Boolean). - API REST con endpoints para:
GET /api/tasks- Obtener todas las tareas.POST /api/tasks- Crear una nueva tarea.PUT /api/tasks/:id- Actualizar una tarea (marcarla como completada).DELETE /api/tasks/:id- Eliminar una tarea.
- Modelo
- Frontend (React):
- Un componente para mostrar la lista de tareas.
- Un formulario para añadir nuevas tareas.
- Botones para marcar tareas como completadas y para eliminarlas.
- Estado para gestionar la lista de tareas, actualizándola después de cada operación.
Este proyecto te forzará a manejar el estado del frontend, la comunicación con la API, y las operaciones de la base de datos, cubriendo el ciclo completo de desarrollo MERN.
🛡️ Fase 6: Fundamentos de Ciberseguridad
Escribir código funcional es solo la mitad del trabajo. Como desarrollador, tienes la responsabilidad de construir aplicaciones seguras. Ignorar la seguridad puede tener consecuencias graves. Aquí tienes algunas prácticas esenciales para aplicaciones MERN, basadas en las vulnerabilidades más comunes (como las del OWASP Top 10).
1. Validación y Saneamiento de Entradas
Nunca confíes en los datos que vienen del cliente. Siempre valida y sanea cualquier dato que recibas en tu backend antes de procesarlo o guardarlo en la base de datos. Esto previene ataques de inyección (NoSQL Injection, XSS).
Herramienta recomendada: express-validator.
npm install express-validator// En tu archivo de rutas
const { body, validationResult } = require('express-validator');
router.post(
'/register',
// Reglas de validación y saneamiento
body('email').isEmail().normalizeEmail(),
body('password').isLength({ min: 8 }).withMessage('La contraseña debe tener al menos 8 caracteres'),
(req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
// Si la validación pasa, continúa con la lógica de registro
// ...
}
);
Adicionalmente, usa los esquemas de Mongoose para forzar tipos de datos y establecer validaciones a nivel de base de datos.
2. Usar Variables de Entorno
Como se mencionó antes, NUNCA guardes credenciales, claves de API, secretos de JWT o cualquier información sensible directamente en tu código. Usa un archivo .env para el desarrollo local y las variables de entorno de tu proveedor de hosting para producción.
# .env
DB_URI=mongodb://...
JWT_SECRET=un_secreto_muy_largo_y_aleatorio
Asegúrate de añadir .env a tu archivo .gitignore.
3. Autenticación y Autorización con JWT
Para proteger rutas y datos, necesitas un sistema de autenticación. JSON Web Tokens (JWT) es un estándar popular para esto.
Flujo Básico:
- El usuario inicia sesión con su email y contraseña.
- El servidor verifica las credenciales. Si son correctas, genera un JWT firmado con un secreto (guardado en tus variables de entorno) y se lo envía al cliente.
- El cliente almacena este token (ej. en una cookie HTTP-Only) y lo envía en la cabecera
Authorizationde cada petición a rutas protegidas. - Un middleware en el servidor verifica la validez del token en cada petición. Si es válido, permite el acceso; si no, lo deniega.
Librerías recomendadas: jsonwebtoken para generar y verificar tokens, y bcryptjs para hashear las contraseñas antes de guardarlas en la base de datos (nunca guardes contraseñas en texto plano).
4. Proteger Cabeceras HTTP con Helmet
Helmet.js es un middleware para Express que establece varias cabeceras HTTP de seguridad, protegiendo tu aplicación contra vulnerabilidades web conocidas como Clickjacking, XSS, etc.
npm install helmet// En index.js
const helmet = require('helmet');
app.use(helmet());
5. Limitar el Rate Limiting
Para prevenir ataques de fuerza bruta o de denegación de servicio (DoS), es una buena práctica limitar cuántas peticiones puede hacer un cliente en un período de tiempo.
Herramienta recomendada: express-rate-limit.
npm install express-rate-limit// En index.js
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutos
max: 100, // Limita cada IP a 100 peticiones por ventana de tiempo
standardHeaders: true,
legacyHeaders: false,
});
app.use(limiter);
6. Mantener las Dependencias Actualizadas
Las vulnerabilidades a menudo se descubren en paquetes de terceros. Usa herramientas como npm audit o Snyk para escanear tus dependencias en busca de vulnerabilidades conocidas y actualízalas regularmente.
npm audit
npm audit fix☁️ Fase 7: Despliegue Gratuito
¡Felicidades por llegar hasta aquí! El último paso es mostrar tu aplicación al mundo. Afortunadamente, hay muchas plataformas excelentes que ofrecen generosos niveles gratuitos para desplegar tus proyectos MERN.
El despliegue de una aplicación MERN se divide en tres partes: la base de datos, el backend y el frontend.
1. Base de Datos en la Nube: MongoDB Atlas
MongoDB Atlas es el servicio oficial de base de datos en la nube de MongoDB. Ofrece un clúster compartido gratuito (M0) que es perfecto para proyectos pequeños y de aprendizaje.
- Crear una cuenta: Regístrate en MongoDB Atlas.
- Crear un clúster gratuito: Sigue el asistente para crear un nuevo clúster. Elige un proveedor de nube y una región cercana a tus usuarios. Asegúrate de seleccionar el tier "M0 Sandbox" (que es gratuito).
- Configurar la seguridad:
- Acceso a la red (Network Access): Debes añadir las direcciones IP que podrán conectarse a tu base de datos. Para empezar, puedes añadir
0.0.0.0/0(lo que permite el acceso desde cualquier IP), pero para producción es más seguro añadir solo la IP de tu servicio de backend. - Acceso a la base de datos (Database Access): Crea un usuario y una contraseña para tu base de datos. Guarda estas credenciales de forma segura.
- Acceso a la red (Network Access): Debes añadir las direcciones IP que podrán conectarse a tu base de datos. Para empezar, puedes añadir
- Obtener la URL de conexión: En la vista de tu clúster, haz clic en "Connect", selecciona "Drivers", y copia la URL de conexión (connection string). Reemplaza
<password>con la contraseña que creaste. - Actualizar tu backend: Usa esta nueva URL de conexión en tu variable de entorno
DB_URIen tu servicio de backend.
2. Despliegue del Backend (Node.js/Express)
Plataformas como Render o Heroku son excelentes para alojar servicios de backend.
Usando Render (Recomendado)
- Prepara tu proyecto: Asegúrate de que tu
package.jsontenga un scriptstart. Por ejemplo:"start": "node index.js". - Sube tu código a GitHub: Render se integra directamente con repositorios de GitHub.
- Crea un "New Web Service" en Render: Conecta tu cuenta de GitHub y selecciona el repositorio de tu backend.
- Configura el servicio:
- Environment: Node.
- Build Command:
npm install. - Start Command:
npm start.
- Añade las variables de entorno: En la sección "Environment", añade todas tus variables de entorno (
DB_URI,JWT_SECRET, etc.). No las guardes en tu código. - Despliega: Haz clic en "Create Web Service". Render construirá y desplegará tu aplicación. Te proporcionará una URL pública para tu API.
3. Despliegue del Frontend (React)
Para aplicaciones de frontend estáticas como las de React, Vercel y Netlify son las mejores opciones. Son increíblemente rápidos y fáciles de usar.
Usando Vercel (Recomendado)
- Prepara tu proyecto: Asegúrate de que tu código de React haga las peticiones a la URL pública de tu backend desplegado en Render (puedes usar una variable de entorno como
VITE_API_URL). - Sube tu código a GitHub: Vercel también se integra con GitHub.
- Importa tu proyecto en Vercel: Inicia sesión en Vercel con tu cuenta de GitHub, haz clic en "Add New... Project" y selecciona tu repositorio de frontend.
- Configura el proyecto: Vercel detectará automáticamente que es un proyecto de React (creado con Vite o Create React App) y configurará los comandos de construcción y el directorio de salida por ti.
- Añade las variables de entorno: Si necesitas variables de entorno en tu frontend (como la URL de la API), añádelas en la configuración del proyecto. Recuerda que las variables de entorno en Vite deben empezar con
VITE_para ser expuestas al cliente. - Despliega: Haz clic en "Deploy". Vercel construirá tu aplicación y la desplegará en su red global (CDN), dándote una URL pública.
¡Y eso es todo! Has desplegado con éxito una aplicación MERN completa de forma gratuita y segura. Ahora puedes compartir el enlace de tu aplicación de Vercel con el mundo.