Firebase Studio y Cloudflare

Es importante usar la IA para avanzar rápido y la nueva herramienta de google Firebase Studio es tentadora. Tiene un modo de prototipo que promete generar una aplicación en minutos.

Sería tonto no probarla, ¿no? ¿NO?

Me encuentro escribiendo cosas para el prototipo, ¿las pongo en inglés? ¿entenderá español? ¿qué puedo generar?

And app with user registration and new users are redirected to a subscription page to select between three plans 'basic', 'pro' and 'enterprise'. Each plan has discount if payed annually (10%). The app uses Stripe to handle payments in the backend. After the user has a valid subscription, the user can visit the homepage where he can create a todo list.

Si, con todo y el error And que puse al inicio... vamos a ver qué genera... 

Increíble, la verdad que es sorprendente lo que puedes hacer en minutos con ésta herramienta.  Obvio tiene muchas limitaciones que estoy esquivando, voy a listar algunas.

• En modo prototipo, no soporta Angular

Ya con esa limitante, para mi, no vale la pena explorar más hasta que google soporte en su herramienta su propio framework.

Después Firebase Studio te ayuda a publicar la aplicación usando Firebase Hosting, es trivial.  ¿Pero qué pasa si quieres usar Cloudflare? ¿Cómo publicas en Cloudflare?  Bueno de eso quería escribir por que para mi no fue trivial.

En éste artículo sólo voy a compartir como publicar en Clouflare Pages, por que también lo puedes publicar usando Cloudflare Workers, pero yo sólo quiero el contenido estático nada de SSR.

La aplicación generada por Firebase Studio es una Nextjs, 😒 He estado esquivando React por años, incluso incursionando con Vue y Svelte que son maravillosos, pero React no me gusta, yo quiero que mis archivos sean html o js o ts o css o scss o json.

Tengo cero experiencia con Nextjs, y la IA no me sirve igual cuando no sé lo que está haciendo.  Pero eh aquí el resultado:

La configuración en next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "export", // Use 'export' for static export
  distDir: "out", // Output directory for the static export
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    unoptimized: true, // Disable Next.js image optimization
    remotePatterns: [
      {
        protocol: "https",
        hostname: "placehold.co",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

export default nextConfig;

Puntos importantes:

Las imágenes guardadas en /public no son accesibles si usas Image tag, para que sirva tienes que deshabilitar la optimización que hace Nextjs con `images.unoptimezed: true`.  output y distDir son opciones que fui encontrando en la web y no estoy seguro de que distDir sea necesario, pero por ahora funciona y la dejé así.

Bien ahora cada vez que corras npm run build creará un directorio out con el sitio estático compilado y listo para publicar.

Ahora Cloudflare.  Crea un nuevo Page dentro de Cloudflare Compute, yo elegí Use direct upload, pero creo que con Import an existing Git repository lo puedes lograr, no lo probé.

Le pones un nombre, todo minúsculas sin espacios y luego te aparece una opción para subir contenido.  En éste punto puedes subir el contenido de tu carpeta out. Yo me regresé a la lista de Workers & Pages, y confirmé de que existía mi nuevo proyecto.

Y aunque ahí dice assets uploaded, no es cierto no subí nada, lo quiero hacer desde mi consola de trabajo usando wrangler.

Después de validar mi cuenta en la terminal puedes correr éste commando en la raíz del proyecto. 'super-app' es el nombre que le pusimos.

$ npx wrangler pages download config super-app
Need to install the following packages:
wrangler@4.15.2
Ok to proceed? (y)


 ⛅️ wrangler 4.15.2
-------------------

Bajará un archivo wrangler.toml básico que necesita un retoquito.

# Generated by Wrangler on Fri May 16 2025 10:21:40 GMT-0600 (Central Standard Time)
name = "super-app"
compatibility_date = "2025-05-16"
pages_build_output_dir = "./out"

[env]
production = { }

Y ahora está listo para publicar...

npx wrangler pages deploy --branch main

--branch main le dice a Cloudflare que debe de ir hasta arriba en el nombre de dominio, de lo contrario usa el nombre del branch que tengas activo en el repositorio git del proyecto.

Para facilitar el ciclo de desarrollo, le agrego a package.json un script:

{
  "name": "nextn",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack -p 9002",
    "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
    "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "deploy": "next build && npx wrangler pages deploy --branch main",
    "typecheck": "tsc --noEmit"
  },

...

Entonces puedes simplemente ejecutar npm run deploy y te lo compila y te lo publica.

Angular, proxy y CORS

La eterna batalla contra CORS: Un recordatorio para mi yo del futuro

De vez en cuando, sobre todo en nuevos proyectos, me tropiezo con la misma piedra. Y hoy, después de perder medio día entre búsquedas en Google, posts antiguos en Stack Overflow, y consultas a Perplexity, ChatGPT 4o-mini, Claude y Deepseek, he decidido documentar la solución para Juan Pablo del futuro.

El problema recurrente

Usualmente, en mis proyectos con Angular (v18), configuro mis variables de ambiente en environment.ts y environment.prod.ts. Típicamente como algo así:

export const environment = {
  production: false,
  protocol: 'http',
  baseUrl: 'http://localhost:5000/',
};

Y luego tengo un servicio que puede hacer una petición al backend así:

  // Use baseUrl from environment and append the specific API path segment
  private apiUrl = environment.baseUrl + 'api/v1'; // Ensure this points to your Go backend

  // Fetch subscription status from API and update the BehaviorSubject
  loadSubscriptionStatus(): Observable<SubscriptionStatus> {
    const headers = this.getAuthHeaders();
    return this.http.get<SubscriptionStatus>(`${this.apiUrl}/subscriptions/current`, { headers })
      .pipe(
        tap(status => this.subscriptionStatusSubject.next(status)), // Update state on success
        catchError(err => {
          this.subscriptionStatusSubject.next(null); // Clear state on error
          return this.handleError(err); // Propagate error
        })
      );
  }

El dolor de cabeza familiar

Y por supuesto, la primera vez el navegador me responde con un error:

Access to XMLHttpRequest at 'http://localhost:5000/api/v1/subscriptions/current' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Me duele la cabeza cada vez que veo ese error... y recuerdo: "¡Ah, tengo que configurar un proxy!". Mientras desarrollo es buena idea, ya en producción no será necesario. Y entonces busco un proyecto anterior y copio el archivo proxy.conf.json y lo acomodo en el angular.json para que se lea cada vez que corro ng serve.

{
    "/api": {
        "target": "http://localhost:5000",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": false
    }
}

Pero el error persiste y pierdo la mitad del día entre búsquedas, todos dan consejos razonables, todos los pruebo cada vez con menos entusiasmo, y me digo: "esto ya lo viví cientos de veces".

La solución (otra vez)

Lo acabo de resolver, y ahora lo voy a documentar para Juan Pablo del futuro.

Toda solución parece evidente cuando la encuentras. Explorando vi algo que podría ser la falla...

Mi baseURL está apuntando al backend, y tengo un proxy que también lo hace. Uno de los dos está mal, de lo contrario no necesitaría el proxy.

Así que, modificando el baseUrl a http://localhost:4200 —el puerto original de Angular— se solucionó el problema.

Cabe mencionar que también configuré el servicio para soportar CORS:

	// Register CORS middleware to allow Angular frontend requests
	pb.OnBeforeServe().Add(func(e *core.ServeEvent) error {
		app.Log.Info("CORS middleware ---")
		e.Router.Use(middleware.CORSWithConfig(middleware.CORSConfig{
			AllowOrigins:     []string{"http://localhost:4200", "http://localhost:8090"},
			AllowHeaders:     []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept, echo.HeaderAuthorization},
			AllowMethods:     []string{http.MethodGet, http.MethodHead, http.MethodPut, http.MethodPatch, http.MethodPost, http.MethodDelete, http.MethodOptions},
			AllowCredentials: true,
			// Ensure OPTIONS requests are handled correctly
			MaxAge: 86400, // Optional: cache preflight results for 24 hours
		}))

		return nil
	})

Esto ya lo había implementado antes eh, no creas que no estaba cuando el navegador se rehusaba a la conexión pero lo pongo ahora por si alguien pensó que me faltaba.

Lección aprendida (otra vez)

La moraleja es simple: cuando uses un proxy para desarrollo, asegúrate de que tu baseUrl apunte al servidor de desarrollo de Angular (localhost:4200), no al backend directamente. El proxy se encargará de redirigir las peticiones al backend apropiadamente.

export const environment = {
  production: false,
  protocol: 'http',
  baseUrl: 'http://localhost:4200/',  // <-- aquí fíjate!
};

Espero que este recordatorio me ahorre tiempo la próxima vez que me encuentre maldiciendo al error de CORS.

Continuando la transición: De Flask a GoFiber

Una ventaja de ser expulsado de tu zona de confort —TurboGears, Genshi, SQLAlchemy— es que te obliga a estudiar y analizar bien cómo quieres que funcionen tus futuros desarrollos. ¿Quieres seguir usando Apache-WSGI? ¿Ya te cansaste de estar pendiente de las actualizaciones de los servidores? ¿Lidiar con dependencias descontinuadas?

Flask parecía la opción más obvia para sustituir a TurboGears, así que comenzamos a migrar algunos desarrollos. La curva de aprendizaje no parecía muy pronunciada. También aprovechamos la oportunidad para irnos hacia una arquitectura serverless, hospedando las aplicaciones en contenedores usando Docker. Ya teníamos experiencia con contenedores al desplegar los proyectos anteriores en TurboGears.

Los contenedores para Flask incluían Nginx, WSGI y el código fuente del proyecto. ~370MB parecían razonables y casi mágicos en ese entonces. Una de las muchas ventajas de Python es que puedes modificar el código mientras está corriendo en producción 🤓. Un error ortográfico, un hotfix, etc., se podían corregir en minutos: abrir una sesión de sh o bash dentro del contenedor, instalar vim, modificar el archivo en cuestión y listo. Después, la corrección se aplicaba al código base y el contenedor quedaba limpio en la siguiente actualización.

Durante la cuarentena de 2020, comencé a utilizar Go para desarrollar servicios. La sintaxis es muy simple, aunque a veces repetitiva. También me costó un poco al principio adaptarme a la falta de un mecanismo tradicional de manejo de excepciones. En Python, Java, JavaScript y otros lenguajes puedes envolver un segmento de código dentro de un try-catch. Siguiendo el principio "It is easier to ask for forgiveness than permission", puedes manejar la excepción cuando lo que crees que va a pasar no sucede.

En Go, tienes que pensarlo de una forma diferente.

Manejo de errores: Python vs. Go

Try-Catch en Python

En Python, el manejo de errores es sencillo con try-except:

def dividir(a, b):
    try:
        return a / b
    except ZeroDivisionError:
        print("Error: No se puede dividir entre cero.")
        return None

resultado = dividir(10, 0)  # Esto imprimirá un mensaje de error

Manejo de errores en Go

Go no tiene un try-catch convencional. En su lugar, el manejo de errores se realiza mediante valores de retorno:

package main

import (
    "errors"
    "fmt"
)

func dividir(a, b float64) (float64, error) {
    if b == 0 {
        return 0, errors.New("no se puede dividir entre cero")
    }
    return a / b, nil
}

func main() {
    resultado, err := dividir(10, 0)
    if err != nil {
        fmt.Println("Error:", err)
    } else {
        fmt.Println("Resultado:", resultado)
    }
}

A medida que avanzábamos en la adopción de Go, nos dimos cuenta de que la simplicidad y el rendimiento que ofrecía valían el esfuerzo de adaptación. Aunque al principio resultaba extraño no contar con un sistema de excepciones tradicional, el manejo explícito de errores nos obligó a escribir código más robusto y predecible. Con el tiempo, terminamos prefiriendo esta aproximación, ya que facilitaba la depuración y nos ayudó a construir servicios más eficientes y escalables. Así, lo que comenzó como una migración obligada, terminó transformándose en una mejora significativa en nuestra forma de desarrollar aplicaciones. 🚀

Agregando timestamps a fotos

Usando mogrify, parte de las herramientas de imagemagick, podemos agregar el timestamps a fotos que tiene la fecha de captura en su EXIF.

$ mogrify  -pointsize 28 -gravity SouthEast -annotate +5+5 '%[EXIF:DateTime]'  *.jpg

Mas información de configuración en: http://www.imagemagick.org/Usage/basics/#mogrify

Cuando tu plataforma favorita es descontinuada

Hace varios años, cuando llegó el momento de elegir una plataforma para sustituir al tremendo Java, con sus JSF, Spring y demás, dimos el salto a Python. La razón principal era su rapidez para desarrollar prototipos, lo que permitía que los clientes pudieran visualizar y aprobar sus proyectos con mayor agilidad.

En ese entonces, había dos propuestas destacadas: Django y TurboGears. Django era la opción obvia, pero no me convencía que todo estuviera integrado dentro del mismo ecosistema: el ORM, el renderizado de plantillas y el enrutamiento. TurboGears, por otro lado, ofrecía herramientas de código abierto para cada una de estas tareas.

Para mí, la mejor opción era TurboGears, y durante muchos años nos funcionó de maravilla. Se desarrollaron numerosos proyectos con esta tecnología: era rápido y fácil de adaptar.

Sin embargo, con la llegada de Python 3.0, las actualizaciones comenzaron a retrasarse. Luego vino Python 3.4 y la situación empeoró; con Python 3.8, simplemente dejaron de existir. TurboGears había quedado abandonado.

Aun así, logramos adaptar nuestros desarrollos para funcionar en contenedores con Python 3.8, la última versión en la que TurboGears aún operaba sin demasiados problemas.

Esperamos en vano una actualización, mientras Django seguía evolucionando.

Durante la cuarentena de 2020 aprovechamos para explorar nuevas opciones. Flask parecía una buena alternativa... pero, en medio del enorme esfuerzo de refactorización, apareció una opción aún mejor: GoFiber y GORM.

Timestamps con SQLAlchemy

Es común tener campos que guarden la fecha de la creación de registro y la fecha de modificación de ése registro.

Mucho tiempo usé la siguiente declaración:

1 2	ts = Column(u'ts', TIMESTAMP(timezone=False), server_onupdate=text('CURRENT_TIMESTAMP'), primary_key=False, nullable=False)

Aprovechando que 'CURRENT_TIMESTAMP' es soportado en MySQL, cada vez que se inserta un registro MySQL pone la fecha del servidor de manera automática.

Creo que ahora hay una mejor manera de manejarlo, siempre y cuando el RDBMS soporte 'on update':



1 2	created = Column(DateTime, nullable=False, default=func.now()) updated = Column(DateTime, nullable=False, default=func.now(), onupdate=func.now())

Es mas simple y fácil de leer

Como quitar atributos extendidos en OSX (com.apple.quarantine)

Recientemente al bajar una nueva plantilla y descomprimirla en un nuevo directorio, aparece que con un '@' a un lado de sus permisos de archivo.

jupabeans at TankerMini in ~/workspace/theme
$ ls -ls
total 0
0 drwxr-xr-x     4 jupabeans  staff   136 Apr 24 22:07 .
0 drwxr-xr-x     7 jupabeans  staff   238 Apr 24 21:56 ..
0 drwxrwxrwx@    6 jupabeans  staff   204 May 28  2015 README
0 drwxrwxrwx@  121 jupabeans  staff  4114 May 28  2015 theme

jupabeans at TankerMini in ~/workspace/theme
$ ls -@ls
total 0
0 drwxr-xr-x     4 jupabeans  staff   136 Apr 24 22:07 .
0 drwxr-xr-x     7 jupabeans  staff   238 Apr 24 21:56 ..
0 drwxrwxrwx@    6 jupabeans  staff   204 May 28  2015 README
     com.apple.quarantine 26
0 drwxrwxrwx@  121 jupabeans  staff  4114 May 28  2015 theme
     com.apple.quarantine 26

Eso indica que el archivo tiene atributos extendidos (extended attributes) en OSX.  En éste caso 'com.apple.quarantine', una bandera que OSX usa desde Leopard (10.5) para marcar archivos descargados de fuentes no confiables.  Cuando ejecutas por primera vez ese archivo, una pantalla de confirmación aparecerá en la pantalla.

Pero ¿qué pasa cuando sólo son archivos de texto? pues nada, pero siempre quedarán marcados y a mi me distraen.  Así que los voy a quitar.

Hay varios métodos para quitarlos, el inteligente sería, buscar los archivos marcados en un directorio y quitarlos uno por uno.  El brutal sería quitarlos con 'recursive' activado.

$ xattr -dr com.apple.quarantine theme

xattr es el comando para manejar los atributos extendidos, -d es la opción para borrarlo -r activa recursividad, luego el nombre del atributo y al final el directorio o archivo.

Hay varias plantillas que tienen los archivos marcados como ejecutables, para quitarlos simplemente:

$ chmod 755 $(find theme -type d)
$ chmod 644 $(find theme -type f)

En ocasiones los espacios en los nombres de archivos pueden confundir los argumentos de chmod. Se puede usar las siguientes alternativas.

$ find theme -type d -exec echo -n '"{}" ' \; | xargs chmod 755
$ find theme -type f -exec echo -n '"{}" ' \; | xargs chmod 644

*actualizado 22 noviembre 2016
Otro método para remover los atributos extendidos

$ xattr -rc .