Instalación y configuración de Sapper

¿Que hicimos en esta clase?
.

1. Actualización de scripts en package.json
   Ahora vamos a trabajar con la configuración de sapper, por lo tanto, ya no usaremos los scripts de webpack. Scripts:
   .
   • dev: creamos un entorno de desarrollo local con sapper.
   • build: construimos el proyecto con sapper.
   • export: exportar a estático nuestro proyecto
   • start: iniciar el proyecto con sapper dentro de node.
     .
2. Creación del archivo .env
   El archivo .env es el encargado de guardar las variables de entorno de node.js. En este caso guardamos la variable developmen ent: NODE_END=development.
   .
3. Creamos el archivo para el servidor
   Este archivo es el que nos permitirá desplegar al app del lado del servidor. Imagina un Live-server (extensión de VS Code) pero desarrollado por nosotros mismos.

// importamos todas las dependencias necesarias para crear el servidor:
import sirv from "sirv";
import compression from "compression";
import polka from "polka";
import * as sapper from "@sapper/server";

// traemos los elementos necesarios y los guardamos en unas constantes:

// es la variable de entorno creada en .env
const { NODE_ENV } = process.env;
// simplemente guardamos la variable de entorno en la constante dev
const dev = NODE_ENV === development;

// creamos el servidor con polka
polka()
// configuración del servidor
  .use(
    // comprimimos nuestros archivos
    compression({ thresold: 0 }),
    // manejamos los archivos estaticos
    sirv('static', { dev }),
    // usamos sapper junto al middleware para empujar la app
    sapper.middleweare()
  )
// se escucha donde estamos (en que puerto) y se maneja un error en caso de que no despliegue
  .listen(PORT, err => {
    if(err) console.log('error', err);
  });

Si quieres entender esto 👆 puedes consultar la documentación de polka.
.
4. Creamos el archivo client.js
Este archivo es creado para empujar la app. Es básicamente una configuración para trabajar con Svelte y Sapper sin que se den puñetazos.

Siempre me ha digamos abrumado toda esa configuración y no como: ¿Queeee de donde saco eso o como sabe que tiene que pasarle todo eso? pero bueno, creo que con el tiempo lo entenderé y aprenderé por completo.

server.js

import sirv from 'sirv';
import compression from 'compression';
import polka from 'polka';
import * as sapper from '@sapper/server';

const { NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka()
  .use(
    compression({ thershold: 0 }),
    sirv('static', { dev }),
    sapper.middleweare()
  )
  .listen(PORT, err => {
    if (err) console.log('error', err);
  });

client.js

import * as sapper from '@sapper'

sapper.start( { 
    target: document.querySelector('app')
 } )

npm install sapper --save-dev

npm install polka compression sirv

polka —> Versión mínima de express, nos va servir para crear el servidor
compression —> Nos ayuda a comprimir nuestros archivos
sirv —> Nos ayuda a publicar nuestro sitio de mejor forma con los archivos estáticos

Archivo .env —> Se añaden las variables de entorno.
Archivo server.js —> Ahí se construye el proyecto (se hacen las importaciones de poka, sirv, compression y se hace el llamado de las variables de entorno.
Archivo client.js —> Se hace la configuración del proyecto para trabajar con Svelte y Sapper.

Dependencias que instalar al usar Sapper

npm install sapper --save-dev
npm install polka compression sirv