Despliegue de Aplicación Svelte en Now

Svelte es un nuevo framework JavaScript para crear aplicaciones SPA que se diferencia de React o Vue en que este hace su trabajo cuando se está compilando la aplicación en vez de cuando se está ejecutando.

Cuando se escribe código usando Svelte se puede ver cómo su sintaxis es más concisa y corta para crear componentes. Ver el tutorial.

Hace poco, me embarqué con un colega en un mini proyecto para crear una aplicación de vídeo llamadas en el navegador, al estilo Appear.in. Para ello acordamos usar la API de vídeo de Twilio y Svelte como framework JS ya que promete dar la verdadera experiencia de una aplicación Reactiva.

Subiendo la Aplicación a Now

Para empezar el proyecto usamos una plantilla de Svelte que usa Webpack para las configuraciones.

En el README de dicha plantilla indican que para hacer un despliegue de la aplicación, si se usa un servicio como Now, solo es necesario ejecutar un comando. En la realidad, no fue tan sencillo como indicaron aunque tampoco fue demasiado difícil.

Primero que nada, hay que instalar Now como paquete global, registrarse e iniciar sesión en la terminal:

$ npm i -g now
...
$ now login

En la documentación de Now, indican que para hacer un deploy, hay que ejecutar el comando now y cuando se ejecuta en verdad hace su trabajo, sin embargo no termina ahí.

Resulta que hay que configurar unas cosillas más porque cuando se ejecuta dicho comando sin unas indicaciones extra, lo único que se está haciendo es hospedando los archivos en el servicio.

Realmente Subiendo a Now

Descubrí que hacer un verdadero despliegue a Now se puede lograr de dos formas:

  1. Configurar un archivo now.json
  2. Mandar la carpeta public

Configurando el archivo now.json

La configuración final es la siguiente:

{
  "name": "intrati",
  "version": 2,
  "builds": [{ "src": "public/**", "use": "@now/static" }],
  "routes": [{ "src": "/(.*)", "dest": "public/$1" }]
}

Todo eso lo encontré en la documentación de Now.sh y lo que significa es que:

  • La sección builds indica que se usará el contenido estático generado en la carpeta public/ para que se visualice
  • La sección routes indica que por cada archivo se generará una ruta accesible, de lo contrario se generarían errores 400

Si no se usa dicha configuración y solo se hace el comando now para subirla al servicio, en la URL asignada solo se mostraran los archivos alojados como se ve en la imagen siguiente:

despliegue de svelte a now no esperado
Ejemplo de cuando ocurre un despliegue no deseado a Now

Esto ocurre porque Now espera que haya un archivo index.html y dado que en las aplicaciones JS(de hoy en día) dicho archivo no está en la raíz sino en la carpeta public ese es el resultado que obtendremos.

Queda evitar este comportamiento indeseado usando la configuración de arriba.

despliegue de svelte a now correcto
Despliegue esperado en Now

Mandando la carpeta public

La otra forma, más sencilla pero puede que no tan deseable, es indicando la carpeta a la cual se le hará el deploy:

$ now deploy ./public

Este funcionará similar a la forma correcta descrita anteriormente con la salvedad de que la URL tendrá el subdominio public lo cual es algo realmente menor.

despliegue de svelte a now carpeta public
URL generada con subdominio public

Es así con estas dos formas que logré completar la subida de la aplicación en Now.

Vale decir que considero a Now un buen servicio. En su capa gratuita ofrece muchas características ideales como certificado SSL para tener HTTPS el cual es necesario para aplicaciones de vídeo llamada.

Y en caso de necesitar más, la capa paga solo cuesta 1 dólar al mes.

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .