Siempre que se quiere probar una nueva tecnologia o practicar las ultimas novedades de algun framework de Javascript nos vemos en la necesidad de usar json-server. Si no estas familiarizado con esta tecnologia te dejo el recurso.
https://www.npmjs.com/package/json-server
Lo curioso es que cuando subimos la app que usa este servicio a los pocos dias puede dejar de funcionar, y es aqui donde es de utilidad Render.
Tendremos 2 secciones. La primera sera como configurar el servidor en Nodejs y el segundo como subirlo a la nube.
A) Configuracion de Nodejs
Veamos los pasos que debemos hacer para crear rapidamente un proyecto pequenio con nodejs y usar json-server. El mismo que nos servira como servidor.
- En la ubicacion de nuestra preferencia en el terminal ejecutar el comando:
npm init -y
Este comando va a crear el archivo package.json donde podremos configurar el servidor.
- A continuacion vamos a instalar 2 paquetes con este comando:
npm i json-server@0.17.4 cors
Este comando instalara la ultima version estable de json-server y los famosos "cors"
Dando como resultado algo similar a esto:
- Crear un directorio llamado src y un archivo llamado server.js donde vamos a insertar el siguiente codigo
const jsonServer = require("json-server");
const cors = require("cors");
const path = require("path");
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, "../data", "db.json"));
const middlewares = jsonServer.defaults();
server.use(cors());
server.use(jsonServer.bodyParser);
server.use(middlewares);
server.use(router);
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`JSON Server is running on http://localhost:${PORT}`);
});
Aqui estamos configurando el servidor en nodejs con lo basico y en la ultima linea, el mismo que escucha desde el puerto 3000 o el puerto que esta configurado para el servidor que vayamos a subir este proyecto.
- Crear una nueva carpeta llamado data y dentro un archivo db.json donde insertaremos estos datos de prueba que se mostraran en la llamada al endpoint. Como a continuacion:
{
"products": [
{
"name": "Milk",
"price": 1.5,
"amount": 3,
"id": "1",
"image": "https://imgs.search.brave.com/M6u3m7J3bZymw167mdLJAzAFZ-O27sh3EqyczI_xxNg/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMudW5zcGxhc2gu/Y29tL3Bob3RvLTE1/MjM0NzM4Mjc1MzMt/MmE2NGQwZDM2NzQ4/P3E9ODAmdz0xMDAw/JmF1dG89Zm9ybWF0/JmZpdD1jcm9wJml4/bGliPXJiLTQuMC4z/Jml4aWQ9TTN3eE1q/QTNmREI4TUh4elpX/RnlZMmg4TVRGOGZH/MXBiR3Q4Wlc1OE1I/eDhNSHg4ZkRBPQ",
"desc": "Description for milk"
},
{
"name": "Cereal",
"price": 1.25,
"amount": 15,
"id": "2",
"image": "https://imgs.search.brave.com/8h1O8Kb08Ato1haRsBLlD4QllX-LYab7srS3Aw6id5k/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM2/NDYzOTQzNi9waG90/by9mcnVpdC1jZXJl/YWwuanBnP3M9NjEy/eDYxMiZ3PTAmaz0y/MCZjPWJDMDNIRmY3/M2x3OG04U3JwZ2Zn/R0JGaDN3YkhYVi1U/UU9yaEFObi1XQms9",
"desc": "Description for cereal"
},
{
"name": "Eggs",
"price": 4.5,
"amount": 12,
"id": "3",
"image": "https://imgs.search.brave.com/RrcrWgO7eabDGeYcubw35EMPJahv38yJNziCTjRwIqM/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTMw/Mzg0Mzc1OC9waG90/by9lZ2dzLWluLWEt/Y2FydG9uLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1WUmtL/bzZXakpjemFSeEFZ/U2dSWWhmZ2F4Sk9Z/d18xUjJaMzhmZm1i/ZWQwPQ",
"desc": "Description for Eggs"
},
{
"name": "Rice",
"price": 3,
"amount": 12,
"id": "4",
"image": "https://imgs.search.brave.com/-hj6EaNwC68ftdtBituJfh19Vn4ZfHtBQv7lHrZjTW4/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTE3/MzI2NjQwMS9waG90/by9yaWNlLWNvb2tl/ZC1yaWNlLXN0ZWFt/ZWQtcmljZS1vbi1i/b3dsLmpwZz9zPTYx/Mng2MTImdz0wJms9/MjAmYz03ZVJsSlZT/RUhPZEhZbVpVTS1z/TXFMQ3cyVlpRMVVz/Si1Ba1VsaVFWR1Q4/PQ",
"desc": "Description for rice"
},
{
"id": "5",
"name": "Tomatoes",
"price": "4",
"amount": "20",
"image": "https://imgs.search.brave.com/evSRbcQAYXNmPczN41SHIQXnKknh6XsyxDF_7l2aXds/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5oc3dzdGF0aWMu/Y29tL2V5SmlkV05y/WlhRaU9pSmpiMjUw/Wlc1MExtaHpkM04w/WVhScFl5NWpiMjBp/TENKclpYa2lPaUpu/YVdaY0x6SmlkWGt0/WjJWdVpYSnBZeTB4/TG1wd1p5SXNJbVZr/YVhSeklqcDdJbkps/YzJsNlpTSTZleUoz/YVdSMGFDSTZPREk0/ZlgxOQ",
"desc": "Description for Tomatoes"
},
{
"id": "6",
"name": "pinaple",
"price": "10",
"amount": "15",
"image": "https://imgs.search.brave.com/evSRbcQAYXNmPczN41SHIQXnKknh6XsyxDF_7l2aXds/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5oc3dzdGF0aWMu/Y29tL2V5SmlkV05y/WlhRaU9pSmpiMjUw/Wlc1MExtaHpkM04w/WVhScFl5NWpiMjBp/TENKclpYa2lPaUpu/YVdaY0x6SmlkWGt0/WjJWdVpYSnBZeTB4/TG1wd1p5SXNJbVZr/YVhSeklqcDdJbkps/YzJsNlpTSTZleUoz/YVdSMGFDSTZPREk0/ZlgxOQ",
"desc": "Description for pinaple"
},
{
"id": "7",
"name": "Carrot",
"price": "12",
"amount": "14",
"image": "https://imgs.search.brave.com/evSRbcQAYXNmPczN41SHIQXnKknh6XsyxDF_7l2aXds/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5oc3dzdGF0aWMu/Y29tL2V5SmlkV05y/WlhRaU9pSmpiMjUw/Wlc1MExtaHpkM04w/WVhScFl5NWpiMjBp/TENKclpYa2lPaUpu/YVdaY0x6SmlkWGt0/WjJWdVpYSnBZeTB4/TG1wd1p5SXNJbVZr/YVhSeklqcDdJbkps/YzJsNlpTSTZleUoz/YVdSMGFDSTZPREk0/ZlgxOQ",
"desc": "Description for Carrot"
},
{
"id": "8",
"name": "salt",
"price": "3",
"amount": "5",
"image": "https://imgs.search.brave.com/evSRbcQAYXNmPczN41SHIQXnKknh6XsyxDF_7l2aXds/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5oc3dzdGF0aWMu/Y29tL2V5SmlkV05y/WlhRaU9pSmpiMjUw/Wlc1MExtaHpkM04w/WVhScFl5NWpiMjBp/TENKclpYa2lPaUpu/YVdaY0x6SmlkWGt0/WjJWdVpYSnBZeTB4/TG1wd1p5SXNJbVZr/YVhSeklqcDdJbkps/YzJsNlpTSTZleUoz/YVdSMGFDSTZPREk0/ZlgxOQ",
"desc": "Description for salt"
},
{
"id": 9,
"name": "Banana",
"image": "https://www.shutterstock.com/image-photo/bunch-bananas-isolated-on-white-600nw-1722111529.jpg",
"price": "3.4",
"amount": "100",
"desc": "Description for Banana"
},
{
"id": 10,
"name": "apples",
"image": "https://www.shutterstock.com/image-photo/red-apple-isolated-on-white-600nw-1727544364.jpg",
"price": "2",
"amount": "50",
"desc": "Description for apples"
}
]
}
Una vez seguido estos pasos tendras algo similar como esto:
- Ejecutar el servidor de nodejs:
node src/server.js
Estar seguro que se muestre en el terminal
Json Server is running on http://localhost:3000
Algo importante que debemos tener en cuenta es que se tiene que subir este proyecto a Github, como sera mi caso o tambien GitLab o Bitbucket.
B) Configuracion del deployment en Render
Aqui empieza la segunda parte donde deberemos haremos deploy del server.
- Crear una cuenta en Render, en el siguiente link:
https://dashboard.render.com/register
Ingresaremos nuestros datos y va a pedir que confirme a traves del correo. Al final se muestra una pantalla como esta:
Escoger la opcion Web Services donde debemos y despues seleccionar el repositorio que previamente subimos a Github.
En la configuracion de Render, nos va a mostrar este formulario donde debemos llenar el campo "Start Command" con esta linea.
Se debe estar seguro de seleccionar la opcion for Hobby projects Free.
node src/server.js
- Configurar el "environment variables" de la siguiente manera:
El nombre
DATABASE_URLy el valordb.json
- En la parte inferior procedemos a dar clic en "Deploy Service"
Fuaaaaaa!!!
Finalmente la parte que mas nos gusta cuando todo ha salido bien, se ha hecho deploy de nuestro servidor.
En la parte superior de la ultima pantalla podemos verificar el link del deploy donde le debemos agregar /products
https://fakeserver-wip2.onrender.com/products
Y como resultado final veremos nuestro api listo para usar
Si algun caso tuviste un error te dejo el repositorio a continuacion subido en Github:
https://github.com/joeaspiazudeveloper/fakeServer
Conclusion:
Ya tenemos una manera de subir nuestros fake endpoints a la nube usando como tecnologias Nodejs, como dependencia json-server en Render.
Top comments (0)