Publicar la app con now

Clase 22 de 23 • Curso de Next.js 2018

Roberto Gonzalez

teacher•

Un dato importante de las primeras clases: Para que funcione bien nuestra app en now tenemos que tener dos scripts registrados en package.json: build y start.
Build se encarga de procesar nuestros archivos para que queden listos para producción, y Start se encarga de correr el server en modo producción de la forma más rápida posible.

Mario Menjívar

student•

Uno de los mejores cursos en Platzi. Junto con los fundamentos de bases de datos y los dos cursos de Leonidas sobre React y Redux.

¡Gracias por esa forma de instruir, @robertomgonzalez!

Sergio Toshio Minei

student•

Despliegue con Now

Para desplegar la aplicación en se va a instalar now de manera global.

$ npm install -g now

Se puede hacer un deploy en el plan gratuito. El plan gratuito hace que el código fuente de tu aplicación sea libre.

$ now --public

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

William Velázquez

student•

Aquí se encuentra mi repositorio al final del curso! 😄
Repositorio
App Pública

Gracias por todo Roberto! 😃

José Gabriel Guzmán Lopéz

student•

Este es el mio

Leo Islas

student•

duda , hiciste alguna modificación en la parte de rutas ya que cuando yo recargo me marca que no encuentra la aplicación pero solo me pasa en producción no en modo dev

Betty Rossana Jimenez Cedeño

student•

Para los que no saben, now es de Zeit, Los pasos son:

Instalar now, como lo hace el profe.
Se tienen que registrar en zeit.
Luego desde la consola pueden acceder con:

now login correo@corre.com

Verifican su correo
Corren el:

now --public

Ricardo Medina

student•

Aqui este mi proyecto ya publicado ; )

App podcasts

La Opinión Digital

student•

Código completo en github

App demo

David Daniel Castillo Nava

student•

Como puedo crear un dist folder para colocarlo en git pages??

Erik Elyager

student•

No todas las aplicaciones web pueden ser hosteadas en github pages. Por ejemplo aplicaciones como la de este curso no estoy seguro pueda generar los archivos totalmente estáticos para subirlos a github pages ya que usa Server Side Rendering y para eso necesitamos node en el servidor.

Ciertamente Next permite hacer la exportación de los archivos estáticos pero aclara que no es aplicable en todos los proyectos. Export Into a Static HTML App

Sergio Toshio Minei

student•

No vas a poder subir una aplicación hecha con Next a Github Pages puesto que no es una página estática.

Lo ideal es que lo hagas con Now como se enseña al final del curso y agregues el enlace a tu repositorio de Github.

Eduardo Rasgado Ruiz

student•

Excelente curso. Gracias @robertomgonzalez eres un pro en lo que haces. Un gran abrazo desde México.
Ahora mis resultados:
Mi app
El repo

Alex John Chamba Macas

student•

Para los amigos que tienen problemas con publicar la app, tienen que crear y configurar los archivos: now.json y next.config.js en el root del proyecto.

next.config.js

module.exports = {
  target: "serverless" 
};

now.json

{
  "version": 2,
  "name": "nombre-de-la-app",
  "builds": [{ "src": "package.json", "use": "@now/next" }]
}

Para más información: Ver documentación

Daniel Vaca

student•

Seguí los pasos de la documentación pero no puedo publicar con now, escribo "now --public" en la línea de comandos y no sucede nada, no presenta ni error ni nada. ¿Alguién que haya tenido y solventado este problema?

Daniel Vaca

student•

Bueno, logré realizar la publicación. Basicamente tuve que copiar y pegar los archivos "now.cmd" y "now" que se encontraban en la ruta de los paquetes globales de npm y los pegué en la carpeta del proyecto, posterior le di doble clic a now.cmd y se realizó la publicación.

No creo que lo anterior sea correcto, pero me funcionó así.

Gustavo Gonzalez

student•

Para los que hacen deploy en Now y en lugar de la App de podcast funcionando, les muestra las carpetas, la solución está en el siguiente enlace de la documentación oficial de Next:

https://zeit.co/guides/deploying-nextjs-with-now/

Espero les sirva!

Luis Lira

student•

Gracias! :D Esta fue la solución que me sirvió

Carlos Enrique Gonzalez Peña

student•

Una pregunta, Now tiene la posibilidad de publicar un server, entiendo esa parte pero con el puro comando de now es suficiente para que se aproveche el SSR?

Daniel Esteves

student•

¡Hola! Si, literalmente Now creó NextJS con solo el comando now el se encargará de saber que es una aplicación en Next y hacer el deploy

Guillermo Vara De Gante

student•

Buen curso aunque si estaria genial que lo actualizaran, de todos modos el proyecto esta cool!

Mario Alejandro Crespo Reyes

student•

Que gran curso. Me gusto mucho Next.js

Deploy: App de Podcast

GitHub: Repositorio

Gracias !

Jorge Méndez Ortega

student•

Si recuerdo bien now paso a ser Zeit https://zeit.co/

Iván Darío Sánchez Jiménez

student•

Actualizando su post ahora https://vercel.com/

Alejandro Zapata Molina

student•

Gran curso, un poco desactualizado pero muy bueno.

Link app: Link repo:

Laura Maritza Romero Triana

student•

Aquí comparto mi aplicación😉😊

YOJAN DAVID CASTELLANOS PEÑA

student•

excelente trabajo

Camila Di Virgilio

student•

No puedes ser, un bonus de Docker, este curso no pudo estar mejor 😄 diez mil puntos.

Ricardo Medina

student•

Aqui esta mi proyecto ya publicado con

Url

Alain Carranza

student•

Hola y si quiero publicarlo en mi propio server que necesito?

Luis Daniel Becerra Avellaneda

student•

Creo que a travez de now tambien puedes hacerlo, busca en la documentacion o toma el curso de now https://platzi.com/clases/deploy-now/

Alain Carranza

student•

Gracias

Publicar la app con now

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso