Estás construyendo un frontend, pero el backend no está listo. Necesitas una API REST que devuelva JSON realista ahora mismo, con GET, POST, PUT y DELETE funcionando, para seguir implementando sin bloquearte.
Para eso sirve json-server: apuntas la herramienta a un archivo JSON y obtienes una API REST funcional en segundos, sin escribir backend. JSONPlaceholder cubre el caso aún más rápido: una API falsa alojada que puedes consumir sin instalar nada. En esta guía verás cómo usar ambas opciones, sus límites y cuándo pasar a un mock basado en esquemas en Apidog.
Para una visión general sobre este enfoque, consulta qué es una API mock. Aquí nos centraremos en las dos herramientas que muchos desarrolladores prueban primero.
¿Qué es json-server?
json-server es una herramienta npm de código abierto que convierte un archivo JSON plano en una API REST. Defines tus recursos en un archivo db.json, ejecutas un comando y obtienes rutas CRUD estándar respaldadas por ese archivo.
Las operaciones de escritura modifican el archivo, así que los datos persisten entre solicitudes mientras usas el servidor local.
Es útil para:
- Prototipos rápidos.
- Desarrollo frontend antes de que exista el backend.
- Demos internas.
- Pruebas manuales o automatizadas simples.
- Simular recursos REST sin base de datos.
El proyecto está disponible en GitHub.
Instalar y ejecutar json-server
Instala el paquete desde npm:
npm install json-server
Crea un archivo db.json en tu proyecto:
{
"posts": [
{ "id": "1", "title": "First post", "views": 100 },
{ "id": "2", "title": "Second post", "views": 250 }
],
"comments": [
{ "id": "1", "text": "Nice work", "postId": "1" }
],
"profile": {
"name": "apidog"
}
}
Reglas básicas:
- Las claves de array de nivel superior se convierten en colecciones.
- Los objetos de nivel superior se convierten en recursos únicos.
- Cada objeto debería tener un
idpara poder accederlo por ruta.
Inicia el servidor:
npx json-server db.json
Por defecto estará disponible en:
http://localhost:3000
Ya puedes consumir la API desde tu frontend:
curl http://localhost:3000/posts
Nota sobre versiones: en
json-serverv1 ya no se usa la antigua bandera--watch. El comando actual esnpx json-server db.json. En tutoriales antiguos de la línea 0.x todavía puedes verjson-server --watch db.json.
Rutas REST generadas automáticamente
Con el db.json anterior, json-server crea rutas CRUD sin configuración extra.
Para la colección posts:
GET /posts
GET /posts/:id
POST /posts
PUT /posts/:id
PATCH /posts/:id
DELETE /posts/:id
Ejemplos:
curl http://localhost:3000/posts/1
curl -X POST http://localhost:3000/posts \
-H "Content-Type: application/json" \
-d '{ "id": "3", "title": "Third post", "views": 10 }'
curl -X PATCH http://localhost:3000/posts/3 \
-H "Content-Type: application/json" \
-d '{ "views": 42 }'
curl -X DELETE http://localhost:3000/posts/3
Para el objeto profile:
GET /profile
PUT /profile
PATCH /profile
Ejemplo:
curl -X PATCH http://localhost:3000/profile \
-H "Content-Type: application/json" \
-d '{ "name": "frontend-team" }'
Filtrar, ordenar y paginar datos
json-server también incluye consultas útiles para prototipos.
GET /posts?views:gt=100
GET /posts?views:lte=50
GET /posts?_sort=-views
GET /posts?_page=1&_per_page=25
GET /posts?_embed=comments
Ejemplos con curl:
curl "http://localhost:3000/posts?views:gt=100"
curl "http://localhost:3000/posts?_sort=-views"
curl "http://localhost:3000/posts?_page=1&_per_page=25"
Operadores disponibles:
ltltegtgteeqneincontainsstartsWithendsWith
Para una API creada desde un archivo plano, es suficiente para desbloquear muchas tareas de frontend.
JSONPlaceholder: una API falsa sin configuración
Si no quieres instalar nada, puedes usar JSONPlaceholder. Es una API REST falsa gratuita alojada en jsonplaceholder.typicode.com.
Ejemplo:
curl https://jsonplaceholder.typicode.com/posts/1
Respuesta:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident",
"body": "quia et suscipit..."
}
Incluye seis recursos predefinidos:
-
/posts— 100 elementos. -
/comments— 500 elementos. -
/albums— 100 elementos. -
/photos— 5000 elementos. -
/todos— 200 elementos. -
/users— 10 elementos.
También acepta POST, PUT, PATCH y DELETE, pero con una limitación importante: las escrituras son simuladas.
Por ejemplo:
curl -X POST https://jsonplaceholder.typicode.com/posts \
-H "Content-Type: application/json" \
-d '{ "title": "Nuevo post", "body": "Contenido", "userId": 1 }'
Recibirás una respuesta realista, pero el recurso no se guardará. Si vuelves a consultar la colección, el nuevo post no existirá.
JSONPlaceholder funciona bien para:
- Ejemplos rápidos.
- Demos.
- Tutoriales.
- Probar llamadas HTTP.
- Conectar una UI a datos predecibles.
No funciona como backend real ni como mock con estado.
json-server vs JSONPlaceholder
| json-server | JSONPlaceholder | |
|---|---|---|
| Configuración | Instalar paquete npm, escribir db.json
|
Ninguna, solo llamar a la URL |
| Ejecución | Localmente, tu máquina | Alojado, público |
| Datos personalizados | Sí, tus propios recursos | No, recursos fijos |
| Las escrituras persisten | Sí, en db.json
|
No, simuladas |
| Mejor para | Prototipos con tus propias formas | Demostraciones rápidas y aprendizaje |
Usa JSONPlaceholder si solo necesitas datos ahora y no te importa su estructura exacta.
Usa json-server si necesitas:
- Recursos propios.
- Rutas con nombres parecidos a tu API real.
- Escrituras persistentes durante el desarrollo.
- Más control sobre la forma del JSON.
Dónde estas herramientas se quedan cortas
json-server y JSONPlaceholder resuelven bien un problema: servir JSON rápidamente. Pero empiezan a limitarte cuando el proyecto deja de ser un prototipo individual.
Limitaciones habituales:
- Sin validación real. No imponen un esquema. Puedes guardar una cadena donde tu API real esperaría un número.
- Sin datos dinámicos o inteligentes. Las respuestas salen del archivo o del dataset fijo. No hay generación automática de emails, fechas, precios o IDs realistas por solicitud.
-
Entorno local o fijo.
json-servervive en tu máquina. Un compañero o una tarea de CI no pueden acceder alocalhost:3000. JSONPlaceholder es público, pero no lo puedes personalizar. - Riesgo de desviarse del contrato. Los datos mock viven separados de tu especificación OpenAPI, así que pueden quedar obsoletos.
- Estado limitado. JSONPlaceholder no guarda escrituras, por lo que no sirve para flujos como carrito, onboarding o pasos encadenados.
Si ya superaste un archivo plano, revisa estos recursos:
- Herramientas para simular endpoints REST
- Servidores de mock de API gratuitos y económicos
- Herramientas de mock de API online comparadas
Cuándo pasar a un servidor de mock real
Un mock basado en esquemas resuelve las limitaciones anteriores. Ahí es donde Apidog puede reemplazar a json-server.
Con Apidog puedes trabajar así:
- Mock dirigido por esquema. Defines un endpoint o importas tu especificación OpenAPI. El mock se genera desde la misma definición del contrato.
-
Datos inteligentes y dinámicos. Apidog interpreta nombres y tipos de campo para devolver valores realistas, como emails válidos para
email, fechas paracreatedAto números paraprice. - Reglas por campo. Puedes ajustar la salida con reglas tipo Faker cuando necesites valores específicos.
-
URL compartida en la nube. El mock queda disponible para frontend, QA, backend y CI sin depender de
localhost. -
Sin instalar Node por proyecto. No necesitas mantener un
db.jsonni levantar un proceso local para cada mock.
Para profundizar en datos realistas, consulta:
Simular la misma API en Apidog
Flujo recomendado:
- Descarga Apidog y crea o abre un proyecto.
- Añade un endpoint, por ejemplo
GET /posts. - Define el esquema de respuesta o importa una especificación OpenAPI existente.
- Usa la URL de mock generada por Apidog.
- Ajusta reglas de mock por campo si necesitas valores concretos.
- Comparte la URL con tu equipo o úsala en pruebas automatizadas y CI.
Ejemplo de esquema conceptual para GET /posts:
{
"posts": [
{
"id": "string",
"title": "string",
"views": "number",
"createdAt": "string"
}
]
}
En lugar de mantener manualmente cada fila en db.json, el mock puede devolver valores coherentes con el contrato.
Así mantienes la velocidad de “API en minutos” de json-server, pero con validación, generación dinámica y una URL accesible para todo el equipo.
Preguntas frecuentes
¿json-server es gratuito?
Sí. Es de código abierto y de uso gratuito. JSONPlaceholder también es gratuito.
¿json-server persiste los datos?
Sí. POST, PUT, PATCH y DELETE escriben de nuevo en tu db.json, por lo que los cambios persisten mientras trabajas con ese archivo. JSONPlaceholder simula las escrituras y no guarda nada.
¿Puedo usar json-server en producción?
No. Está pensado para prototipos, desarrollo y pruebas. No ofrece validación real, autenticación ni una estrategia de escalabilidad para producción.
¿Cuál es la diferencia entre json-server y un servidor de mock como Apidog?
json-server sirve un archivo JSON como API REST. Apidog simula endpoints desde tu esquema de API, devuelve datos dinámicos realistas y expone una URL compartida en la nube.
Para más contexto, revisa qué es una API mock y el resumen de herramientas de mock REST.
¿Cómo obtengo datos falsos realistas en lugar de filas estáticas?
Usa un generador de datos. Un generador de datos de prueba crea registros variados y realistas. El mock de Apidog puede hacerlo automáticamente desde tu esquema.
En resumen
json-server convierte un archivo JSON en una API REST funcional con un solo comando. JSONPlaceholder te da una API falsa alojada sin configuración. Ambas opciones son útiles para desbloquear desarrollo frontend rápido.
Cuando necesites validación de esquemas, datos dinámicos, una URL compartida y un mock alineado con tu contrato real, un archivo plano deja de ser suficiente. En ese punto, el servidor de mock de Apidog toma el relevo.
Descarga Apidog, importa tu especificación y empieza a consumir un mock consistente desde la primera solicitud.


Top comments (0)