Instalación y configuración de Sapper
Clase 4 de 17 • Curso de Sapper
Contenido del curso
John Cardenas
student•
hace 5 años
Clase 4 de 17 • Curso de Sapper
Contenido del curso
John Cardenas
Juan Esteban Galvis
Juan Pablo Celiz
Jaime David Burbano Montoya
David Lara
Juan David Avila Caycedo
Juan Jiménez
Eduardo Antonio Rivero Rivera
¿Que hicimos en esta clase? .
.env es el encargado de guardar las variables de entorno de node.js. En este caso guardamos la variable developmen ent: NODE_END=development.
.// 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.
Chill bro, es más fácil de lo que parece, es como dices, a la larga te acostumbras :D
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') } )
por que svelte dejar de ser depedencia de desarrollo ?
Because svelte going transform to vanilla JavaScript and you don't need this library for this reason.
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