Sabias que se puede subir un fake backend de json-server a la nube???

#frontend #webdeveloper #javascript

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.

https://render.com/

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