Hola mundo en Netlify functions con TypeScript

Hola mundo con TypeScript y Netlify functions

Netlify te permite desplegar funciones sin servidor en AWS, las famosas AWS’s serverless Lambda functions sin necesidad de tener una cuenta en Amazon, de forma que podemos tener un proyecto completo en Netlify, no sólo las funciones como Backend, si no también el Frontend.

Las funciones Lambda de AWS abren un mundo de posibilidades, ya que podemos correr código de servidor sin tener un servidor dedicado y además nuestro código será escalable dentro de la arquitectura de AWS.

Por defecto, todas la funciones que despleguemos en Netlify tendrán las siguientes características:

Se alojarán en us-east-1 AWS Lambda region
Contarán con 1024MB de memoria
Un límite de 10 segundos de ejecución para funciones síncronas
Y 15 minutos de límite de ejecución para funciones en segundo plano background functions que explicaré en otro post

1. Iniciando proyecto de TypeScript

Para iniciar un proyecto de TypeScript ve a mi artículo donde lo explico, es muy rápido y fácil

2. Añadirlo a GitHub

Crea en la raíz del proyecto el fichero .gitignore, para añadir todo lo que no queramos que se sigue en Git. En nuestro caso no queremos que se siga la carpeta node_modules

A continuación:

Creamos nuestro proyecto en GitHub.
Inicializamos un proyecto de git con:
```
git init
```
Añadimos al repositorio todos los archivos excepto los que están en el fichero .gitignore con:
```
git add .
```

Añadimos el repositorio remoto con:

git remote add origin <nombre-de-tu-repositorio>

Hacemos el primer commit con:
```
git commit -m "first commit"
```
Cambiamos a la rama main con:
```
git branch -M main
```
Subimos los fichero a nuestro repositorio remoto con:
```
git push -u origin main
```

Si quieres más información acerca de git puedes echarle un vistazo a este artículo

3. Crear cuenta gratis en Netlify

Para crearnos una cuenta gratuita vamos a esta web y elegimos la forma de login que más nos guste, en mi caso elegí hacerlo con GitHub.

4. Crear proyecto en Netlify

En la pestaña de Sites, pulsar sobre el botón que pone New site from Git y elegir el repositorio quecreamos en el punto 2.

Esta acción publicará automáticamente lo que tengamos en nuestro repositorio, ya que por defecto está activado el continuous deployment and continuous integration (CI/CD)

5. Preparando nuestro entorno para escribir las funciones

Antes de crear nuestra función de hola mundo, tenemos que crear una carpeta llamada netlify y dentro otra llamada functions y ahí es donde crearemos nuestra funciones que después desplegaremos en Netlify. Esa ruta de carpeta es en la que Netlify buscará por defecto las funciones para transpilarlar a JavaScript y desplegarlas.

Si quisieras que tus funciones estuvieran en otra ubicación lo puedes configurar haciendo uso de un fichero llamado

netlify.toml

en donde le puedes especificar en la sección

[functions]

la propiedad de

directory

y ahí escribir tu ruta deseada, resumiendo, si quisiera desplegar tus funciones en una carpeta llamada

mis_funciones

tu fichero tendría una sección con el siguiente aspecto:

[functions]
              directory = "mis_funciones"

A continuación, instalaremos los tipos para TypeScript de las funciones de Netlify, para ello

npm install @netlify/functions

Es recomendable que tengas activadas las propiedades

esModuleInterop

isolatedModules

de tu fichero de configuración de TypeScript

tsconfig.json

6. Crear función en TypeScript

Crearemos en el directorio que deseemos tener nuestras funciones, recuerda que en el punto anterior creamos una carpeta

netlify

y dentro otra

functions

un fichero typescript llamado

hola.ts

y en su interior escribiremos nuestra función de hola mundo. El fichero

hola.ts

quedará:

 import { Handler } from "@netlify/functions";

  const handler: Handler = async (event, context) => {
    return {
      statusCode: 200,
      body: JSON.stringify({ message: "Hola mundo" }),
    };
  };

  export { handler };

quedará:

7. Desplegar en Netlify

Para desplegar en Netlify tan fácil como subir los cambios a nuestro repositorio remoto, para ello:

```
git add .
```
```
git commit -m "hola mundo"
```
```
git push
```

Si nos vamos a nuestra cuenta de Netlify y entramos al sitio que creamos en el punto 4 veremos los distintos despliegues en la zona que rodeo en amarillo:

Si pulsamos en la pestaña de Functions veremos nuestra función desplegada y pulsando sobre ella accederemos a sus características como son el endpoint y el panel de log

8. Probar

Tan fácil como escribir el endpoint en nuestro navegador y nos devolverá el

Hola mundo

que escribimos en el body de las respuesta de la función en el punto 6.

Puedes descargarte el código de mi github

Hasta luego 🖖