CursosEmpresasBlogLiveConfPrecios

Despliegue en Heroku

Clase 16 de 17 • Curso de Sapper

Clase anteriorSiguiente clase

Contenido del curso

Bienvenida

  • 1
    Por qué aprender Sapper y qué vas a aprender

    Por qué aprender Sapper y qué vas a aprender

    01:22 min
  • 2
    ¿Qué es Sapper?

    ¿Qué es Sapper?

    03:52 min

Configuración para Sapper

  • 3
    Clonar proyecto Pugstagram

    Clonar proyecto Pugstagram

    04:42 min
  • 4
    Instalación y configuración de Sapper

    Instalación y configuración de Sapper

    08:14 min
  • 5
    Crear Template html

    Crear Template html

    03:21 min
  • 6
    Webpack

    Webpack

    12:26 min

Rutas con Sapper

  • 7
    Layout

    Layout

    15:12 min
  • 8
    Profile

    Profile

    04:52 min
  • 9
    Header

    Header

    05:41 min
  • 10
    Error 404

    Error 404

    07:03 min

Optimización

  • 11
    Uso de prefetch y goto

    Uso de prefetch y goto

    07:12 min
  • 12
    Primer llamado con prefetch

    Primer llamado con prefetch

    05:54 min

Service Worker

  • 13
    Crear Service Worker

    Crear Service Worker

    06:08 min
  • 14
    Configurar Service Worker

    Configurar Service Worker

    10:02 min

Despliegue

  • 15
    Despliegue usando Sapper Export

    Despliegue usando Sapper Export

    07:49 min
  • 16
    Despliegue en Heroku

    Despliegue en Heroku

    Viendo ahora

Cierre

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

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

    01:21 min
Tomar examen
    Wilson Fernando Antury Torres

    Wilson Fernando Antury Torres

    student•
    hace 6 años
    • netlify sirve archivos estáticos a partir de un compilado por parte de sapper.
    • heroku puede correr un servidor en express o en este caso polka, podemos hacer consultas a bases de datos y crear un API.
    Daniel Augusto Melgarejo Gómez

    Daniel Augusto Melgarejo Gómez

    student•
    hace 6 años

    tarea terminada https://pugstagram-sapper-melman.herokuapp.com/

    Wilson Fernando Antury Torres

    Wilson Fernando Antury Torres

    student•
    hace 6 años

    Lo que podemos hacer es hacer despliegue del front en netlify, y desde allí consumir un API externo. Es correcto?

      Juan Castro

      Juan Castro

      teacher•
      hace 6 años

      Sí. Podemos hacer exactamente eso.

    Wilson Fernando Antury Torres

    Wilson Fernando Antury Torres

    student•
    hace 6 años

    Alguien soluciono la carga de los iconos de perfil y de likes en el header cuando se carga deshabilitando javascript?

      Jaime David Burbano Montoya

      Jaime David Burbano Montoya

      student•
      hace 6 años

      Aquí esta mi código, echale un ojo, a mi me funcionan los iconos

      https://github.com/eltranseunteurbano/Pugstagram-sapper

    Sorin Danila

    Sorin Danila

    student•
    hace 4 años

    A mi me falla el build en heroku. En local funciona todo.

    -----> Building on the Heroku-20 stack -----> Determining which buildpack to use for this app -----> Node.js app detected

    -----> Creating runtime environment

    NPM_CONFIG_LOGLEVEL=error NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true

    -----> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default)

    Resolving node version 16.x... Downloading and installing node 16.14.0... Using default npm version: 8.3.1

    -----> Installing dependencies Prebuild detected (node_modules already exists) Rebuilding any native modules rebuilt dependencies successfully Installing any new modules (package.json)

    added 272 packages, changed 1 package, and audited 399 packages in 5s 9 packages are looking for funding run `npm fund` for details 5 high severity vulnerabilities To address all issues, run: npm audit fix Run `npm audit` for details.

    -----> Build Running build

    > pugstagram@1.0.0 build > sapper build > Building... > Cannot find module './SourceAndMapMixin' Require stack: - /tmp/build_d586fafb/node_modules/webpack-sources/lib/OriginalSource.js - /tmp/build_d586fafb/node_modules/webpack-sources/lib/index.js - /tmp/build_d586fafb/node_modules/webpack/lib/Compiler.js - /tmp/build_d586fafb/node_modules/webpack/lib/webpack.js - /tmp/build_d586fafb/webpack.config.js - /tmp/build_d586fafb/node_modules/sapper/dist/core.js - /tmp/build_d586fafb/node_modules/sapper/dist/build.js - /tmp/build_d586fafb/node_modules/sapper/dist/cli.js - /tmp/build_d586fafb/node_modules/sapper/sapper Error: Cannot find module './SourceAndMapMixin' Require stack: - /tmp/build_d586fafb/node_modules/webpack-sources/lib/OriginalSource.js - /tmp/build_d586fafb/node_modules/webpack-sources/lib/index.js - /tmp/build_d586fafb/node_modules/webpack/lib/Compiler.js - /tmp/build_d586fafb/node_modules/webpack/lib/webpack.js - /tmp/build_d586fafb/webpack.config.js - /tmp/build_d586fafb/node_modules/sapper/dist/core.js - /tmp/build_d586fafb/node_modules/sapper/dist/build.js - /tmp/build_d586fafb/node_modules/sapper/dist/cli.js - /tmp/build_d586fafb/node_modules/sapper/sapper at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (/tmp/build_d586fafb/node_modules/webpack-sources/lib/OriginalSource.js:68:1) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19)

    -----> Build failed

    We're sorry this build is failing! You can troubleshoot common issues here: https://devcenter.heroku.com/articles/troubleshooting-node-deploys Some possible problems: - node_modules checked into source control https://devcenter.heroku.com/articles/node-best-practices#only-git-the-important-bits - Node version not specified in package.json https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version - A module may be missing from 'dependencies' in package.json https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies Love, Heroku

    ! Push rejected, failed to compile Node.js app. ! Push failed

    Alguna idea?

    Kevin Fiorentino

    Kevin Fiorentino

    student•
    hace 5 años

    Ojalá actualicen el curso de Heroku que el actual en Platzi es muy viejo.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads