Instalación y configuración de Sapper

Comentarios

John Cardenas

student•

¿Que hicimos en esta clase? .

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. .
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. .
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.

Juan Esteban Galvis

student•

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.

Juan Pablo Celiz

student•

Chill bro, es más fácil de lo que parece, es como dices, a la larga te acostumbras :D

Jaime David Burbano Montoya

student•

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')
 } )

David Lara

student•

por que svelte dejar de ser depedencia de desarrollo ?

Juan David Avila Caycedo

company_admin•

Because svelte going transform to vanilla JavaScript and you don't need this library for this reason.

Juan Jiménez

student•

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.

Eduardo Antonio Rivero Rivera

student•

Dependencias que instalar al usar Sapper

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

// 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);
  });

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);
  });

Instalación y configuración de Sapper

Bienvenida

Por qué aprender Sapper y qué vas a aprender

¿Qué es Sapper?

Configuración para Sapper

Clonar proyecto Pugstagram

Instalación y configuración de Sapper

Crear Template html

Webpack

Rutas con Sapper

Layout

Profile

Header

Error 404

Optimización

Uso de prefetch y goto

Primer llamado con prefetch

Service Worker

Crear Service Worker

Configurar Service Worker

Despliegue

Despliegue usando Sapper Export

Despliegue en Heroku

Cierre

Continúa con el Curso Práctico de Svelte y Sapper