¡Remix está mejor que nunca! Pues ya está utilizando Vite como compilador. ⚡️

Fly.io a su vez, está ofreciendo una cantidad de servicios para programadores, que nos permiten llevar a producción con confianza y sin tener que desembolsar la millonada. 💸 Además podemos escalar y tener todas las métricas que necesitemos en Grafana. ✅

Por eso en este video te voy a enseñar cómo iniciar un proyecto web moderno y listo para producción, usando: Remix v2, Vite y una base de datos SQLite con Prisma que, subiremos a producción en un volumen que añadiremos a nuestra maquina virtual en Fly.io.

¡Todo lo anterior en tan solo 3 pasos! 😲

Bueno, si esto es justo lo que buscabas, ¡no perdamos más tiempo!

Paso 1: Creando el proyecto con Remix

Vamos a iniciar un nuevo proyecto web con Remix.

npm create remix@latest

Nombra tu proyecto como prefieras e instala todos los paquetes.

Si abrimos nuestro proyecto en VSCode, ya no encontraremos el archivo remix.config ahora encontraremos vite.config.ts. 🤯

Vamos a correrlo para ver que todo funciona. npm run dev

Paso 2: Agregando la base de datos

Ahora inicializamos una base de datos usando Prisma.

👀 Prisma podría requerir de una cierta configuración para funcionar en Fly.io

Pero, por ahora vamos a instalar prisma e inicializar el schema.

npm i -D prisma
npm i @prisma/client
npx prisma init --datasource-provider sqlite

Una vez que ejecutamos esos tres comandos, ahora podemos entrar en el archivo que mantendrá nuestro esquema. Agregaremos un nuevo modelo nomás pa que no se quede pelón. 👨🏼‍🦲

Observa que se necesita de una variable de entorno llamada DATABASE_URL, esta variable. contendrá la dirección del archivo y será una dirección diferente para el trabajo local de desarrollo y la dirección del volumen que usará en producción ya corriendo en Fly.io.

Si vamos al archivo .env encontrarás el valor de la variable.

DATABASE_URL="file:./dev.db"

Este archivo lo generó Prisma. dev.db será tu base de datos de desarrollo (local) SQLite funciona solo con un archivo, es lo genial de esta base de datos y es muy potente también en producción. Te dejo algunos enlaces para que aprendas más de SQLite. Pero, no olvides que con Prisma puedes usar la base de datos de tu preferencia SQL o noSQL. Agregar Prisma a tu proyecto lo convierte en “database agnostic”.

👀 “database agnostic” busca comunicar que: se puede trabajar con multiples tipos distintos de base de datos con la misma herramienta (Prisma).

Paso 3: Es hora de lanzar a producción

¿Ya tan pronto? A esta forma de trabajar se le conoce como “production ready” o “production mindset”, es decir que todo lo que se empuja a la branch main, se publica en producción automáticamente. De esta forma el programador no piensa en versiones de borrador, sino que sus cambios siempre están listos para producción.

Por eso crearemos un proyecto nuevo en Fly.io, lo modificaremos un poco y lo subiremos a producción.

👀 probablemente necesites usar una tarjeta bancaria.

instalamos primero flyctl.

curl -L https://fly.io/install.sh | sh

Ahora que tenemos instalado flyctl, vamos a iniciar nuestra app con:

fly auth login

fly launch

Puedes consultar las guías de Fly.io si tu proyecto necesita de una configuración especial, pero esto funciona con cualquier lenguaje. 🤯

Responde las preguntas y modifica los datos que necesites, a mí me ofrece Querétaro; ten paciencia, esto podría tomar un rato. 📖

¡Tu sitio se ha publicado! 🚀 https://NOMBRE-flyio.fly.dev/ ¿Qué loco no?

Vamos a terminar de configurar nuestra aplicación que ahora corre en la nube.

Se han creado algunos archivos y ahora podemos encontrar el archivo fly.toml. Vamos a configurarlo.

// ...

[[mounts]]
  source = 'data'
  destination = '/data'

[env]
  DATABASE_URL="file:/data/sqlite.db"

Primero montamos el volumen donde vivirá nuestro archivo .db, luego definimos la variable de entorno que Prisma utilizará para conectarse con la base de datos en producción. Yo uso /data por pura convención, tú puedes ponerle el nombre que quieras como: data_volume o database_folder. ¡Listo! Vamos a actualizar el sitio y mirar el dashboard en Fly.io.

👀 Es importante que consideres herramientas para replicar tus bases de datos correctamente si piensas tener más de un volumen.

Subimos nuestros cambios con fly deploy

Nuestra app debería seguir funcionando, ¡ahora con una base de datos persistente! 🔥

Paso BONUS: Creando un record en la base de datos

Vamos a concluir nuestra configuración, probándola un poco, para eso, vamos a crear un record en la única ruta que tiene nuestro proyecto Remix y a la vez enlistar la lista que se irá creando.

Primero generemos los archivos del cliente de prisma con:

npx prisma generate && npx prisma migrate dev

Y agregamos un loader a nuestra ruta home: app/routes/_index.tsx

export const loader = async (_: LoaderFunctionArgs) => {
  const prisma = new PrismaClient();
  await prisma.user.create({
    data: { email: `fake-${Math.floor(Math.random() * 1000)}@email.com` },
  });
  const users = await prisma.user.findMany();
  return users ?? [];
};

export default function Index() {
  const users = useLoaderData<typeof loader>();
  console.log("USERS: ", users);
  return (
    <article className="font-sans p-4">
      <h1>Este es el stack más productivo</h1>
      <section>
        {users.map((u) => (
          <p key={u.id}>{u.email}</p>
        ))}
      </section>
    </article>
  );
}

¡Es momento de la verdad! ¿Será que esto funciona en producción? ¡Hagan sus apuestas!

Ejecutamos fly deploy y observamos.

¡Wow! Funciona.

En caso de ser necesario:

Si te sale un error de prisma sobre openssl, intenta agregar este comando al Dockerfile:

# syntax = docker/dockerfile:1

# Adjust NODE_VERSION as desired
ARG NODE_VERSION=20.8.0
FROM node:${NODE_VERSION}-slim as base

# Install openssl for Prisma
RUN apt-get update && apt-get install -y openssl

// ...

Bueno, ahí está. Un proyecto moderno y listo para producción con su propia base de datos y además ahora podemos crear nuestras rutas con todo el sabor de Remix y sus loaders y actions y su fetcher y ¿que genial no crees?

Abrazo. Bliss. 🤓

Enlaces relacionados

No hay repo, ¿si no que chiste? Inténtalo. 🤓

Instalación de flyctl en Windows

https://fly.io/docs/flyctl/install/

SQL distribuido LiteFS https://fly.io/docs/litefs/