Prototipo de projecto con JS, Bootstrap, Vite, Deta i Supabase

Para hacer una web moderna hay infinidad de opciones y combinaciones. En el módulo de DWEC de DAW se imparte una porción de lo necesario para hacer la parte del "Frontend" de una aplicación web. Falta, sobretodo, un "Backend". Por eso, este manual pretender dar unas indicaciones mínimas para hacer un prototipo vertical. Lo haremos con unas tecnologías que nos ayudarán a tener un backend mínimo para poder probar nuestras aplicaciones de cliente.

Veamos los requisitos y qué tecnología nos los cubrirá:

• Una API REST para poder hacer peticiones CRUD a una base de datos relacional: Supabase.
• Un servidor que nos registre y permita hacer login a los usuarios, además de gestionar el perfil: Supabase y Supabase Storage
• Un servidor para guardar imágenes o documentos que los usuarios suban a la web: Supabase Storage o Deta Drive.
• Una librería de estilos para no tener que hacer lo que se hace en DIW todo el tiempo: Bootstrap
• Un bundle JS para empaquetar todo al pasar a producción: Vite
• Un servidor en Internet para enviar a producción la web: Deta
• Un servidor de desarrollo en local que permita hacer empaquetar y refrescar en tiempo real con cada cambio: Vite y Deta
• Una suite de test: Jasmine.
• Algún control de versiones: Git en Github

Ahora argumentaremos los motivos para la elección de estas tecnologías, desde el punto de vista de un profesor o alumno de DWEC:

• Supabase es un Backend as a Service muy interesante que tiene por debajo una base de datos PostgreSQL, lo que lo convierte en algo muy parecido a lo que puedan hacer en DWES. Tiene su propio SDK (que no usaremos) y una API REST. Usaremos la API REST para que el frontend pueda cambiar de backend más fácilmente, por si se quiere unir al proyecto de DWES. Además, ya nos soluciona todo el tema de la autenticación de usuarios de forma segura y cómoda. Podría ser Firebase, pero una base de datos NoSQL puede marear a los alumnos si no la han tratado todavía.
• Bootstrap es una librería de estilos y de interfaz. Es muy fácil de usar desde el principio. El objetivo de un proyecto en DWEC no suele ser estético, pero con esta librería al menos no queda demasiado feo.
• Vite es una herramienta fundamental, ya que empaqueta y sirve los archivos para pasar a producción. Escogemos esta por su facilidad y porque es la que usa Angular a partir de la versión 16.
• Deta es uno de tantos servicios en la nube para desplegar cómodamente. Ofrece un servicio gratuito bastante completo con frontend y backend (que no usaremos en principio), incluso con base de datos y ficheros. Es un poco raro para empezar a trabajar, pero en realidad en pocos pasos se despliega una web como la que queremos hacer y se puede consultar desde Internet.
• Jasmine será nuestra suite de test porque es la que usa Angular y porque permite hacer test en el cliente.

Instalación de todo

Este manual pretende ser corto, una guia de referencia. Las descripciones largas y manuales completos estan en cada web oficial.

En nuestro sistema, crearemos una carpeta para ponerlo todo dentro. Dentro de esa carpeta comenzaremos por configurar Deta:

Configurar Deta

Manual: [1]

Lo primero es darse de alta en Deta y ejecutar los comandos que su manual oficial recomienda:

curl -fsSL https://get.deta.dev/space-cli.sh | sh
space new

Aquí creamos el proyecto de deta.

El fichero principal es Spacefile. En este se definen las distintas partes funcionales de una aplicación web. Empezaremos con un frontend mínimo que crearemos con Vite. Este código servirá:

v: 0
micros:
  - name: deta
    src: ./js-autoeval
    engine: static
    primary: true
    commands:
      - npm run build
    serve: dist
    dev: npm run dev -- --port $PORT