Layout

Clase 7 de 17 • Curso de Sapper

Clase anteriorSiguiente clase

Pedro Renatto Neciosup Liza

student•

Para los que tienen el error 500: Deben de agregar una condicional en el archivo index.svelte

Mateo Aquino

student•

Gracias!! Funciona... Pero ¿Por qué?

Así estoy en este momento:

Juan Pablo Celiz

student•

Logré solucionarlo así como lo hiciste... pero ¿WHY?

Jorge Carrion

student•

Para los que tengan el error:

Error: Cannot find module './internal/manifest-server'

Usen la versión 4 de webpack. Yo tenía la versión 5, bajé a la 4 y funcionó!!!

Lo más facil es copiar el package.json de la clase, borrar y reinstalar los módulos.

Fuente: https://github.com/sveltejs/sapper/issues/1583

Marco Calzada Rodriguez

student•

Me funcionó. Bajé a la versión 4.44.1 de Webpack.

"webpack": "^4.44.1"

Marco Calzada Rodriguez

student•

Como lo comentó Oscar, estuve lidiando un buen rato con problemas debido a las nuevas actualizaciones en dependencias. Las versiones que a mi me funcionaron de las librerías son estás:

"dependencies": {
    "compression": "^1.7.4",
    "polka": "^0.5.2",
    "sirv": "^0.4.2"
  },
  "devDependencies": {
    "svelte": "^3.18.2",
    "sapper": "^0.27.12",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.41.6"
  }

Julian David Alzate Cuervo

student•

Gracias

Kevin Candia

student•

Muchas gracias

Sergio Agustín Rojas Encina

student•

al hacer build me da un error : Error: Cannot find module '/.../sapper/dev/server/server.js'

LEONARDO RAMOS ARIRAMA

student•

Buen avance del proyecto

Diego Alejandro Osorio Escobar

student•

En este punto al final se me presentó un inconveniente relacionado con que no me hacia ni Server ni client render, para las personas que les llegue a suceder esto, no se preocupen, mas adelante el problema es resuelto. Esta relacionado con la peticion de los datos al momento de hacer el SSR. Buen dia!

Cristian Camilo Rodriguez

student•

Tambien me paso XD, pero en mi caso es que al haceder a un objeto de la api, la encontraba vacio el objeto, la estaba haciendo con otra api

Cristian Camilo Rodriguez

student•

se puede utilizar routing,solo instalando la dependencia npm install --save svelte-routing o si queremos utilizar la herramienta adecuadamente seria mejor sapper

Luis Lira

student•

¡Hola!

Tienen propósitos diferentes cada una. Sapper para hacer Server Side Render, eso significa que tu página ya llegará construida desde el servidor y por lo tanto el tiempo de espera para que cargue será menor. Svelte-routing espara crear solamente navegación del lado del front sin necesidad de un SSR.

Te dejo una clase de la escuela de JS donde explica la diferencia entre Server Side Rendering y Cliente Side Rendering. ¿Qué es Server Side Rendering?

Cristian Camilo Rodriguez

student•

vale muchas gracias

Julian David Alzate Cuervo

student•

Para los que están actualmente realizando el curso es recomendable usar versiones previas de webpack como lo dice Marco Calzada Rodriguez y arreglar el typo de middleweare por middleware en src/server.js

Pablo Miguel Jiménez García

student•

No tengo idea que salio mal, ya corroboré los archivos que sean iguales pero no entiendo por qué da este error.

Eric Gomez

student•

Actualmente la versión 5 de Webpack no es compatible con algunos paquetes que se utilizan en este proyecto, baja a la versión 4 de Webpack.

Lo más fácil es copiar el package.json de la clase, borrar node_modules y reinstalar los módulos.

Juan Esteban Galvis

student•

Compañeros tengo este error al hacer npm un dev y entrar al localhost/3000 :

Cristobal Peña

student•

Me salió este mismo mensaje después de descargar los archivos de la clase. ¿Cómo lo arreglaste?

Cristobal Peña

student•

Al final lo arreglé desinstalando las dependencias con rm -rf node_modules y volviéndolas a instalar con npm install .

Mateo Aquino

student•

Me figura el error no such file or directory pustagram/static

Lo que no entiendo es, static esta dentro de src ¿como puedo hacer para que lo encuentre?

Fabian Rivera Restrepo

student•

Tengo el siguiente problema, se queda en un ciclo infinito

<✔ server (1.6s)
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
webpack:///./src/server.js?:23
  .listen(PORT, err => {
          ^

ReferenceError: PORT is not defined
    at eval (webpack:///./src/server.js?:23:11)
    at Module../src/server.js (C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\__sapper__\dev\server\server.js:374:1)
    at __webpack_require__ (C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\__sapper__\dev\server\server.js:21:30)
    at C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\__sapper__\dev\server\server.js:85:18
    at Object.<anonymous> (C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\__sapper__\dev\server\server.js:88:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
> Server crashed
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...
✗ client
src/client.js
Module not found: Can't resolve '@sapper' in 'C:\Users\User\Desktop\Courses\Platzi\AF\Sapper\svelteApp\src'

src\node_modules\@sapper\service-worker.js changed. rebuilding...>

¿Qué debo hacer?

Nery Alberto Cano Ortigoza

student•

¿Podrías compartir tu código para poder entender un poco mejor que está sucediendo?

Fabian Rivera Restrepo

student•

webpack.config.js

<const webpack = require('webpack');
const path = require('path');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const alias = { svelte: path.resolve('node_modules', 'svelte') };
const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
const mainFields = ['svelte', 'module', 'browser', 'main'];

module.exports = {
  client: {
    entry: config.client.entry(),
    output: config.client.output(),
    resolve: { alias, extensions, mainFields },
    module: {
      rules: [
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
              dev,
              hydratable: true,
              hotReload: false
            }
          }
        }
      ]
    },
    mode,
    plugins: [
      new webpack.DefinePlugin({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode)
      }),
    ].filter(Boolean),
    devtool: dev && 'inline-source-map'
  },

  server: {
    entry: config.server.entry(),
    output: config.server.output(),
    target: 'node',
    resolve: { alias, extensions, mainFields },
    externals: Object.keys(pkg.dependencies).concat('encoding'),
    module: {
      rules: [
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
              dev,
              css: false,
              generate: 'ssr'
            }
          }
        }
      ]
    },
    mode: process.env.NODE_ENV,
    performance: {
      hints: false
    }
  },
};>

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({ threshold: 0 }),
    sirv('static', { dev }),
    sapper.middleware()
  )
  .listen(PORT, err => {
    if ( err ) console.log('error', err);
  });>

Client.js

<import * as sapper from '@sapper'

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

Layout

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