Despliegue de Aplicación Svelte en Now
Tags: svelte, javascript, spanish, now
Published: 2019-07-09 13:53:30

	

[Svelte](https://svelte.dev/) 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](https://svelte.dev/tutorial/basics).

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](https://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](https://github.com/sveltejs/template-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](https://zeit.co/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:

```bash
$ 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:


```json	
{
  "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](https://zeit.co/docs/v2/deployments/official-builders/static-now-static/) 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](https://otroespacioblog.files.wordpress.com/2019/07/01-svelte-to-now-bad-deployment.png)

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 esperado en Now](https://otroespacioblog.files.wordpress.com/2019/07/02-svelte-to-now-good-deployment.png)

### 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:

```bash	
$ 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.

![URL generada con subdominio public](https://otroespacioblog.files.wordpress.com/2019/07/03-svelte-to-now-public-folder.png)

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.

***

_Este artículo fue publicado [primero en mi blog personal](https://otroespacioblog.wordpress.com/2019/07/09/despliegue-de-aplicacion-svelte-en-now/), [Otro Espacio Blog](https://otroespacioblog.wordpress.com/). Ahí escribo sobre todo lo que aprendo al programar y también sobre temas no relacionados a tecnología._