Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 9H : 11M : 5S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Sapper

Curso de Sapper

Oscar Barajas Tavares

Oscar Barajas Tavares

Instalación y configuración de Sapper4/17

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

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

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.

Dependencias que instalar al usar Sapper

npm install sapper --save-dev
npm install polka compression sirv
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.

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

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

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.

Dependencias que instalar al usar Sapper

npm install sapper --save-dev
npm install polka compression sirv
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.