Cómo desplegar una aplicación Sapper en Netlify
Tags: svelte, netlify, sapper, deploy
Published: 2021-02-14 17:36:37

En este artículo, vamos a ver qué es Sapper, cómo crear una aplicación simple y finalmente implementarla en Netlify. ¡Al lío! 🤓

> Artículo original en [Cómo desplegar una aplicación Sapper en Netlify](https://alextomas.com/blog/deplegar-sapper-netlify)

## ¿Qué es Sapper?

Ya hice una breve referencia a lo que era Sapper en el artículo dónde hablamos de [crear un blog con sapper y markdown](https://alextomas.com/blog/blog-svelte-sapper-markdown), pégale un vistazo.

Sapper es un framework hecho con Svelte ya preparado con un enrutamiento flexible basado en sistemas de archivos y SSR. Tal vez conozcas NuxtJS con Vue… pues lo mismo, pero para Svelte 😜

Así que si eres un desarrollador de Svelte y quieres crear una aplicación renderizada del lado del servidor rápida y robusta en Svelte, la podrás crear fácilmente con Sapper. Al igual que para la creación de aplicaciones representación del lado del servidor en **React** tenemos un framework muy popular llamado **Next.JS** .

> A diferencia de las aplicaciones de una sola página (SPA), Sapper no compromete el SEO, mejora carga inicial de la aplicación.

## ¿Qué es Netlify?

[Netlify](https://www.netlify.com/) es una plataforma de alojamiento web de próxima generación que proporciona todo lo que necesita para crear sitios web rápidos y modernos como CI / CI, funciones sin servidor, etc...

Beneficios de usar de Netlify:

-   Puede crear una cuenta gratuita para sus proyectos.
-   Precios muy bajos con muchas características.
-   Proporciona certificados SSL gratuitos y cuenta con administraciones de DNS integradas.
-   Si quieres almacenar datos, Netlify también tiene un [CMS Netlify](https://www.netlifycms.org/) .

## ¿Cómo crear una aplicación en Sapper?

Necesitarás tener lo siguiente:

-   Última versión estable de Node JS y NPM.
-   Conocimiento básico de HTML, CSS y JavaScript
-   El conocimiento de Svelte es una ventaja adicional

La forma más fácil de crear una aplicación Sapper es [clonando el repositorio](https://github.com/sveltejs/sapper-template) con **degit**. Usando esta plantilla podemos crear la aplicación Sapper con dos de los paquetes de módulos más populares, que son, [rollup.js](https://rollupjs.org/) y [Webpack](https://webpack.js.org/) . Puedes elegir cualquiera de los dos, con el que te sientas más cómodo.

Usando Rollup:

```bash
npx degit "sveltejs/sapper-template#rollup" saper-netlify-app
```

Usando Webpack:

```bash
npx degit "sveltejs/sapper-template#webpack" saper-netlify-app
```

Una vez termine accede al directorio generado e instala las dependencias:

```bash
cd saper-netlify-app
npm install
```

![Dependencias de Sapper instaladas](https://alextomas.com/blog/dependencias_instaladas_sapper.jpg)

¡Y eso es todo! Ya podemos ver nuestra aplicación Sapper con el siguiente comando:

```bash
npm run dev
```

Y aquí tenemos nuestra primera aplicación hecha con Sapper:

![Dependencias de Sapper instaladas](https://alextomas.com/blog/sapper_ejemplo_primera_instalacion.jpg)

Si le echamos un vistazo al `package.json` en `scripts` veremos los siguientes:

```json
"scripts": {
	"dev": "sapper dev",
	"build": "sapper build --legacy",
	"export": "sapper export --legacy",
	"start": "node __sapper__/build"
}
```

-   `dev`: para iniciar la aplicación en modo de desarrollo
-   `build`: compila la aplicación en modo de producción
-   `export`: exportar la versión estática de la aplicación (usaremos este comando para implementar la aplicación)
-   `start`: inicia la aplicación que has creado en modo de producción

Bien. Ya tenemos nuestra aplicación Sapper y sabemos como arrancarla, verla y generar los archivos estáticos para lanzarla a producción.

# Git: Bitbucket, Gitlab...

Ahora vamos a crearnos nuestro repositorio para tener el código en él (puedes elegir la plataforma que quieras como Gitlab o Bitbucket). Esto daría para otro artículo, por lo que debes de estar familiarizado con el tema de crear un repositorio y hacer commits.

```bash
git init
git add .
git commit -m "Mi primer commit"
git remote add origin <your repo address>
git push -u origin master
```

¡Perfecto! Hasta ahora hemos hecho lo siguiente:

-   Hemos creado con éxito una aplicación Sapper básica.
-   Hemos introducido el código fuente en Git.

## Implementar la aplicación Sapper en Netlify

Llega el momento de implementar nuestra aplicación Sapper en Netlify. Si todavía no eres usuario de Netlify, créate una [cuenta gratuita en Netlify](https://app.netlify.com/signup), es fácil y rápido.

Una vez que hayas iniciado sesión, serás redirigido a (https://app.netlify.com/)[https://app.netlify.com/].

### Crear nuevo sitio desde Git

Para empezar a crear nuestro nuevo sitio deberemos hacer click sobre `New site from Git`:

![Crear nuevo sitio desde Git en Netlify](https://alextomas.com/blog/new_site_from_git.jpg)

El siguiente paso seré elegir la plataforma Git en la que tienes tu repositorio (GitHub, GitLab o Bitbucket), en nuestro caso será Bitbucket (si es la primera vez que haces este paso te pedirá que autorices tu cuenta con Netlify):

![Crear nuevo sitio desde Git en Netlify](https://alextomas.com/blog/select_git_platform.jpg)

Y nos pedirá con qué repositorio queremos conectar nuestra app. En nuestro caso, para el ejemplo, será `ejemplo-de-uso-sapper`:

![Seleccionamos repositorio para CI en Netlify](https://alextomas.com/blog/seleccionar_repo.jpg)

Este es el último paso de configuración, pero vamos a detenernos un poco en ver qué es cada cosa, porque es importante:

![Seleccionamos repositorio para CI en Netlify](https://alextomas.com/blog/configuracion_ci_sapper_netlify.jpg)

-   `Branch to deploy`: rama que se desplegará con el CI de Netlify. Esto quiere decir que cuando hagas un commit a la rama `master`(en este caso de ejemplo) Netlify iniciará una compilación de tu aplicación Sapper para hacer el despliegue.
-   `Build command`: cuando Netlify detecte un commit en la rama que hayas configurado como `Branch to deploy` ejecutará este comando.
-   `Publish directory`: directorio que se desplegará en tu aplicación.

En nuestro caso, queremos desplegar nuestra aplicación Sapper, y como vimos antes, para generar los archivos necesarios usaremos `npm run export`. Entonces, la configuración en Netlify debería quedar así:

![Configuración CI para Sapper en Netlify](https://alextomas.com/blog/configuracion_sapper_comando_deploy.jpg)

¡Ya está todo! El último paso es clickar en `Deploy site`. Esto te generará tu aplicación y lanzará tu primer `deploy` de la misma.

# Conclusiones de usar Netlify

Netlify me ha sorprendido por su sencillez de uso y las funcionalidades que te dan de forma gratuita. Es increíblemente sencillo crear una aplicación y desplegarla en una URL que ellos te facilitan (luego lo puedes conectar a tu dominio). Sin duda, recomiendo 100% el uso de Netlify si no quieres gastarte ni un euro y tener las útlimas tecnologías.

# Código de ejemplo y demo

Demo: https://determined-thompson-ceb618.netlify.app/
Repo: https://bitbucket.org/_alextomas_/ejemplo-de-uso-sapper/src/master/

Y esto es todo. Espero que te pueda servir 😉