Crear Template html

Clase 5 de 17 • Curso de Sapper

Clase anteriorSiguiente clase

Devi Chaves Rodriguez

student•

Esto me recuerda a templates de django

Carlos Eduardo Magallon Zepeda

student•

<!DOCTYPE html>
    <html lang="es">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Pugstagram</title>
      %sapper.base%
      %sapper.styles%
      %sapper.head%
    </head>

    <body>
      <app>
        %sapper.html%
      </app>
      %sapper.scripts%
    </body>
    <script src="https://kit.fontawesome.com/TU_PROPIO_HASH.js" crossorigin="anonymous"></script>
    </html>

John Cardenas

student•

F por el directorio public donde estaba nuestro archivo index.html. Ya no lo necesitamos porque estamos generando nuestro propio servidor con polka. Polka utilizará el template.html que creamos en esta clase para añadir la app. Ya no usaremos la opción que nos daba svelte para trabajar con archivos públicos, por lo tanto, no es necesario. . Lo que hicimos en esta clase fue añadir variables nativas de sapper a nuestro template. Esto se hace para añadir elementos externos (scripts, estilos, metadatos) a nuestro archivo principal.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- añade la base del proyecto a este archivo -->
  %sapper.base%
  <!-- añade los estilos necesarios de nuestra app a este archivo -->
  %sapper.styles%
  <!-- añade los metadatos a este template -->
  %sapper.head%
</head>

<body>
  <!-- empuja (muestra) la app a este archivo template para que sea renderizada-->
  <app>%sapper.html%</app>
  %sapper.scripts%
  <script src="https://kit.fontawesome.com/473d269aa9.js" crossorigin="anonymous"></script>
</body>
</html>

Crear Template html

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