Aloja tu aplicación de Remix en Compute de Fastly

Remix es un moderno y popular marco web de todo el stack basado en JavaScript. Con él, los desarrolladores pueden centrarse en la interfaz de usuario y trabajar con estándares web que permitan ofrecer experiencias rápidas y estables. Gracias a nuestras nuevas bibliotecas remix-compute-js, ya puedes alojar tu aplicación de Remix en nuestra plataforma Compute y, así, distribuir contenidos en nuestra red del edge, de alcance mundial, sin tan siquiera necesitar un servidor de origen.

No paramos de aumentar la compatibilidad de Compute en JavaScript, lo cual nos permite ofrecer cada vez más integraciones para que puedas trabajar con los marcos y bibliotecas actuales. Este año ya hemos hablado de la distribución integral de sitios web estáticos en el edge y hace poco también repasamos cómo ejecutar tu sitio Next.js en el edge. Hoy nos gustaría compartir el trabajo que hemos hecho para ofrecer compatibilidad con Remix.

Remix es un popular marco web de todo el stack que se basa en JavaScript y pone el énfasis en los estándares web y las mejoras progresivas. Se trata de un marco moderno que, al haber adoptado las interfaces de la API Fetch, encaja a la perfección con Compute, que hace exactamente lo mismo. Lo mejor de todo es que Remix presenta un diseño adaptado a tu tiempo de ejecución y escrito desde cero para funcionar con varios tiempos de ejecución del servidor y adaptadores de servidor, por lo que puede ejecutarse en múltiples plataformas.

Así, hemos podido compilar un tiempo de ejecución de Remix, un adaptador de punto de entrada y una plantilla de proyecto para darte todo lo necesario y para que puedas usar Compute como entorno en el que ejecutar Remix.

Ya puedes aprovechar todas las posibilidades de Remix en tu aplicación de Compute, como la compatibilidad con todo tipo de estándares web y las mejoras progresivas. Diseña tu proyecto con Remix a tu manera sirviéndote de sus útiles funcionalidades: definir el enrutamiento basado en convenciones, aprovechar las posibilidades de React Router, representar MDX y crear rutas para API.

Ni qué decir tiene que también puedes sacar provecho de las funcionalidades de Compute, como realizar llamadas de captura a backends o utilizar polyfills para integrar entornos con módulos compatibles que ofrezca NPM.

Crea tu proyecto de Remix

Encontrarás una plantilla para Compute de Fastly en GitHub, en https://github.com/fastly/remix-compute-js/tree/main/packages/remix-template. Así pues, solo necesitas tener instalado Node.js en tu entorno local y ya podrás empezar a crear tu proyecto con Remix mediante la herramienta oficial de línea de comandos create-remix:

npx create-remix@latest ./my-app --template https://github.com/fastly/remix-compute-js/tree/main/packages/remix-template

Tendrás que indicar si quieres crear tu proyecto mediante JavaScript o TypeScript (yo prefiero este último). El resto del proceso se realizará de forma automática.

Si vas al directorio ./my-app, verás que tienes una estructura del proyecto ya hecha. Aparte de ser un proyecto de Remix, también tienes una aplicación JavaScript de Compute con un archivo fastly.toml que describe tu aplicación para Fastly, así como un punto de entrada en src/index.js.

Tu aplicación viene preconfigurada para funcionar en el Development Server de Fastly, que estará disponible con solo instalar la CLI de Fastly. Basta con que ejecutes el comando siguiente:

npm run dev

Abre http://127.0.0.1:7676 en tu navegador web y verás la aplicación de plantilla de Remix.

Este archivo está creado a partir del archivo app/routes/index.jsx (.tsx si usas TypeScript). Puedes modificar el archivo si quieres y verás que la aplicación se recompilará y la ventana del navegador se actualizará automáticamente.

En realidad, se ejecutan dos procesos: el compilador de Remix y el servidor de desarrollo de Fastly, ambos en modo de inspección. Cada vez que modifiques los archivos del directorio app/, el compilador de Remix activará una recompilación y hará que los archivos de salida se actualicen en los directorios build/ y public/build/. Cuando ocurra esto o cuando actualices los archivos del directorio public/, también se recompilará el servidor de desarrollo de Fastly. En el fondo, lo que tienes ahora es un entorno de desarrollo para tu aplicación de Remix con ejecución en Compute que se actualiza solo.

El adaptador del servidor

La potente arquitectura de Remix es capaz de mantener separados dos elementos: la propia aplicación de Remix, que es tu código escrito en el marco de Remix; y la interfaz existente entre Remix y la plataforma del servidor. Estos elementos aportan flexibilidad al modo en que la plataforma del servidor interactúa con Remix, lo cual se agradece, y mucho, desde proveedores de plataformas como nosotros.

El uso más simple, que también es el que hemos implementado en la plantilla del proyecto, consiste en aprovechar la función createEventHandler que Fastly exporta desde el paquete del adaptador del servidor. Lo esperado es staticAssets, importado del archivo ./statics que genera el Static Publisher (que también se instala automáticamente cuando usas la plantilla):

import { createEventHandler } from "@fastly/remix-server-adapter";
import { staticAssets } from "./statics";

addEventListener("fetch", createEventHandler({ staticAssets }));

No obstante, si para algún caso de uso quieres tener más control sobre el módulo ServerBuild que se usa con Remix o sobre la manera en que se atienden las peticiones de activos estáticos, también ofrecemos funciones de niveles inferiores para ayudarte:

import { createRequestHandler, handleAsset } from "@fastly/remix-server-adapter";
import { staticAssets } from "./statics";

const build = staticAssets.getAsset("/build/index.js").module;  
const requestHandler = createRequestHandler({build});  

addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));  
async function handleRequest(event) {  
  let response = await handleAsset(event, staticAssets);  
  if (!response) {  
    response = requestHandler(event);  
  }  
  return response;  
}

Lanzamiento

Cuando ya lo tengas todo para publicar el sitio, crea una compilación de producción y examínalo para comprobar que todo funcione correctamente.

Para el servidor de desarrollo y ejecuta los siguientes comandos:

npm run build
npm start

Esto genera una compilación de producción de tu aplicación con archivos JavaScript optimizados. A continuación, deberás actualizar el navegador para ver cómo funciona la versión de producción de tu aplicación en el servidor de desarrollo, dado que no se recarga en vivo en compilaciones de producción.

Una vez hayas comprobado que la versión de producción del sitio es la esperada, ya puedes desplegarlo en Fastly. Si todavía no tienes cuenta, empieza creando una y luego configura la CLI de Fastly con las credenciales de tu nueva cuenta. En cuanto hayas terminado podrás desplegar la aplicación a tu cuenta de Fastly:

npm run build
npm run deploy

Se te pedirá que crees un nuevo servicio de Fastly, pero puedes usar uno ya existente modificando fastly.toml y estableciendo el identificador de tu servicio como valor service_id antes de ejecutar los comandos mencionados.

En resumidas cuentas, así es cómo se usa Remix en Compute: desarrolla como siempre con npm run dev, haz las pruebas pertinentes mediante npm run build y npm start y, cuando quieras pasar a producción, despliega en el edge con npm run build y npm run deploy.

¿Ya has creado tu aplicación con Remix? Cómo pasarla a Compute

¿Ya has empezado a crear una aplicación con Remix? ¿Está alojada en un backend de Node.js, quizá? A menos que tu proyecto no trate de hacer algo que, teóricamente, es imposible en Fastly (como interactuar con un sistema de archivos), suele ser fácil adaptar la aplicación para que funcione en Compute.

La forma más sencilla es crear un proyecto de Remix vacío usando la plantilla anterior, de modo que todas las dependencias se instalarán automáticamente y, además, el adaptador del servidor se creará como parte del proceso. Instala en tu nuevo proyecto cualquier paquete de dependencias al que haga referencia tu proyecto original, para luego pasar los archivos de tu proyecto existente al nuevo. En Remix, los archivos de la aplicación se encuentran en app/ y public/. Con la mayoría de archivos de estos directorios, bastará con que los copies en el nuevo proyecto sin olvidar lo siguiente:

1. Algunos de los archivos de origen harán referencia a los paquetes de tiempo de ejecución de Remix, como @remix-run/node, @remix-run/cloudflare o @remix-run/deno. Sustituye estas referencias por @fastly/remix-server-runtime.

Por ejemplo, puede que te salga lo siguiente:

import { json } from "@remix-run/node";

Deberás cambiarlo a:

import { json } from "@fastly/remix-server-runtime";

2. En el caso de entry.client.tsx, entry.server.tsx y root.tsx, ubicados en el directorio app/, lo mejor será empezar con los que se encuentran en el nuevo proyecto. Examina estos archivos en el proyecto de origen, busca cambios que hayas efectuado en los mismos y luego realiza los cambios equivalentes que correspondan en el nuevo proyecto.

3. /public/build/ es un directorio que se genera durante la compilación, por lo que te lo puedes saltar.

4. Según las dependencias que presente tu proyecto, puede que necesites añadir polyfills para que se ejecuten en Compute.

¡Ya está! Compila y despliega tu aplicación en el edge como hicimos en el apartado anterior.

Tu aplicación de Remix, ahora en Compute

Ya está aquí la integración entre Remix y Compute, que te permite alojar toda tu aplicación de Remix en el edge sin necesidad de un servidor de origen. Aprovecha la sólida arquitectura de Remix y los miles de servidores de la red de Fastly al ejecutar tu aplicación en Compute.

En Fastly, nuestro objetivo es darte la posibilidad de ejecutar y desarrollar más código en el edge con tus herramientas favoritas. Nos encanta cuando los usuarios sacan partido de las posibilidades que ofrecemos. ¡Escríbenos en Twitter y cuéntanos qué es lo último que has hecho!