Iniciar un servidor de estáticos con zeit/list

Clase 25 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Resumen

list hace poco ha cambiado de nombre, ahora esta librería se llama serve, para instalarlo ejecuta sudo npm i -g serve

Para iniciar el servidor ejecuta serve built/statics --port 3001 --cache 0

Comentarios

Jose Lehi Arteaga

student•

Dato extra: zeist/list ya cambio a zeist/serve

Rafael Villarreal

student•

Por alguna razón me da este error en la consola del navegador y no funcionan las rutas sin recargar la pagina, agradecería si me ayudaran GET net::ERR_CONNECTION_REFUSED

Ricardo Azpeitia P.

student•

Estoy bastante seguro que debería de ser http://localhost:3001/app.js tienes un / por un : en el url.

Jesus ibanez

student•

Tengo bien el URL hy me da el mismo error.

Juan Castro

teacher•

Señores, creo que el archivo webpack.client.config.js iba era en el anterior video, no en este 😄

Yeison Daza

student•

Hola, en este concepto se hace algunas modificaciones al archivo, por esto se incluye en el video 😄

Juan Castro

teacher•

Ok, pero tambien pónganlo en el anterior 😄

Juan Moya Carrera

student•

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in.
at invariant (app.js:303)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (app.js:9509)
at ReactCompositeComponentWrapper.performInitialMount (app.js:14687)
at ReactCompositeComponentWrapper.mountComponent (app.js:14578)
at Object.mountComponent (app.js:2773)
at mountComponentIntoNode (app.js:8719)
at ReactReconcileTransaction.perform (app.js:4497)
at batchedMountComponentIntoNode (app.js:8741)
at ReactDefaultBatchingStrategyTransaction.perform (app.js:4497)
at Object.batchedUpdates (app.js:18322)
invariant @ app.js:303
instantiateReactComponent @ app.js:9509
performInitialMount @ app.js:14687
mountComponent @ app.js:14578
mountComponent @ app.js:2773
mountComponentIntoNode @ app.js:8719
perform @ app.js:4497
batchedMountComponentIntoNode @ app.js:8741
perform @ app.js:4497
batchedUpdates @ app.js:18322
batchedUpdates @ app.js:1341
_renderNewRootComponent @ app.js:8935
_renderSubtreeIntoContainer @ app.js:9016
render @ app.js:9037
(anonymous) @ app.js:24985
webpack_require @ app.js:20
module.exports @ app.js:66
(anonymous) @ app.js:69

sale esto al incluir el script:

Miguel Romero

student•

Tengo exactamente el mismo problema :S

Diego José Molina Gonzalez

student•

Tengo el mismo problema, lo pudieron solucionar?

Rafael Villarreal

student•

Si habiamos cambiado los nombres de las rutas about a profile, por que siguen apareciendo en la barra de búsqueda del navegador??

Sergio Daniel Xalambrí

student•

Por que aunque cambiamos las rutas no cambiamos el link al que apunta Go to about, por eso al entrar da error 404.

Daniel Guarin

student•

me sale que list no es un comando… 😦

Daniel Rafael Colon Montalvo

student•

Hola,
Tengo el siguiente inconveniente siguiendo el curso con la libreria list o serve, he seguido los pasos del curso y descargue el mismo para revisar si el error lo cometía yo, pero encontré el mismo conflicto al querer ejecutar el programa. error de token en el módulo.
/usr/lib/node_modules/list/dist/bin/list:163
const directoryPath = […pathParts];
^^^

SyntaxError: Unexpected token …
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:414:25)
at Object.Module._extensions…js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:136:18)
at node.js:963:3

Sergio Daniel Xalambrí

student•

Eso ocurre al tratar de iniciar el servidor de estáticos?

Que versión de Node.js usas? Si no es la v6 tenes que actualizar ya que esta librería no da soporte a versiones inferiores de Node.js.

Daniel Rafael Colon Montalvo

student•

Tengo la versión 4.2.4, tengo entendido que la versión 6 aun no es estable para producción. crees conveniente subir a la 6?

Juan Diego Silva Garcia

student•

Un pequeño aporte para que no les salga la advertencia: Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.

cambien el metodo render() porhydrate() en el archivo client.js

Oscar Xahil Montaño Ayala

student•

Hola, cuando corro el servidor de render me sale este error:

El servidor de estaticos funciona bien, alguien tiene alguna idea??

Sergio Daniel Xalambrí

student•

Cuál error? Eso es solo una URL.

Luis Rocha

student•

el error es en Layout.jsx en producción llama a deberia llamar al htttp://dominio:3001

Martín Varela

student•

Si utilizo express no debería necesitar dos servidores no? Podría tanto renderizar como servir los estáticos desde el mismo server… Es así o entendí mal ?

Gracias

Sergio Daniel Xalambrí

student•

Así es, pero no lo recomiendo, si el mismo servidor que hace el render sirve los estáticos entonces se van a compartir el límite de request por minuto.

Lo mejor es que los estáticos se sirvan en un servidor específico para eso (en producción NGINX sería lo mejor) y luego tengas tu aplicación de Node.js solo para procesar peticiones y hacer el render.

De la misma forma tener un servidor para el API separado del servidor de render.

Ricardo Azpeitia P.

student•

Si quieres un toque aun mas profesional puedes servir los estaticos desde un CDN.

Andres Duque Hincapie

student•

Está algo (bastante) desactualizado todo el curso 😕

Diego Forero

Team Platzi•

Ya estamos trabajando en la nueva versión del curso 😃

Andres Duque Hincapie

student•

:'3

Markoz Peña Mendez

student•

Hola @Sergio 😃
Estuve investigando en internet el concepto de archivos estático pero no me queda de todo claro.

¿Cual seria tu definición de archivo estático?

Muchas gracias por leer mis pregunta 😃

Saludos.

Sergio Daniel Xalambrí

student•

Un archivo estático es uno que se lee desde el disco y se envía tal cual, por ejemplo una imágen, un CSS, un JS, etc. son estáticos.

Si fuesen dinámicos serían generados en el momento, por ejemplo el HTML inicial es dinámico ya que se genera cuando el usuario entra al sitio.

Markoz Peña Mendez

student•

**Gracias Sergio 😄 **

@Sergio
Me salió el siguiente error.

at Object.<anonymous> (app.js:25005)
at webpack_require (app.js:20)
at module.exports (app.js:66)
at app.js:69
a react-router lo tengo como react-router-dom

ya que cambio. Ya verifique todo mi código y no tengo nada malo.

Markoz Peña Mendez

student•

@Sergio
Me salió el siguiente error.

at Object.<anonymous> (app.js:25005)
at webpack_require (app.js:20)
at module.exports (app.js:66)
at app.js:69
a react-router lo tengo como react-router-dom

ya que cambio. Ya verifique todo mi código y no tengo nada malo.

Juan Diego Silva Garcia

student•

Por qué se llama servidor estático y porque se le dicen archivos estáticos de la APP? no entendí muy bien.

Diego Forero

Team Platzi•

Los archivos estáticos son por ejemplo imagenes, fuentes, css y JS, estos no cambian, para servir estos archivos en producción se usan servidores como nginx o apache, en desarrollo se montan servidores como el que se muestra en la clase.

Juan Carlos Correa Herrera

student•

¿Por qué me da este error:

Uncaught SyntaxError: Unexpected token <

en app.js:1?

Diego Forero

Team Platzi•

Es básicamente un error de sintaxis, esta recibiendo o llegando algo que no espera, si compartes tu código te podemos ayudar más.

Juan Carlos Correa Herrera

student•

Por alguna razón en navegador me, el layout en la parte donde agrego app.js, me aparece apuntando al puerto 3000 en lugar de 3001.

Código: <script src=“”/>
Navegador:

Y es como si me redirigiera al index.js de server.

Borré el caché y reinicié el server pero sigue igual 😮

Daniel Guarin

student•

alguien puede ayudarme, me sale list no es un comando en la terminal

Sergio Daniel Xalambrí

student•

Tenés que instarlo de forma global o usarlo desde tus scripts de npm.

Daniel Guarin

student•

ok, muchas gracias voy a intentar mañana, otra pregunta. aparte de react router, que mas toca actualizar a día de hoy??

Alex Mejicanos

student•

Por que estoy recibiendo este tipo de error: _http2.default.createServer is not a function

Sergio Daniel Xalambrí

student•

Estás usando list? Si es así te recomiendo usar serve ya que list cambió de nombre, mejor que uses la última versión de serve.

Si no es eso en donde te da ese error? que archivo? estás importando algún módulo llamado http2?

Jesus ibanez

student•

No me funciona el comando list, está demasiado desactualizado esto 😕

Diego Forero

Team Platzi•

Instalaste el servidor de estaticos , la última versión cambio de list a serve.

Jesus ibanez

student•

Me cuesta mucho seguir con el curso por estar tan desactualizado, tengo que invertir mucho tiempo en buscar y cambiar todas las cosas que son diferentes. Como pueden ofrecer a casi 900 pesos un curso desactualizado y que cuesta tanto darle un seguimiento.

Miguel Rivas

student•

Para el que tenga problemas en correr list - del mismo modo que no me corria webpack, escribiendo “webpack” en linea de comando, se soluciona list instalando la dependencia como global.

sudo npm i -g list

luego hacer “list” y funcionará.

Sergio Daniel Xalambrí

student•

Una vez agregado el script sfs en el package.json ya no deberías necesitar instalar list de forma global y ya que el comando tiene varios parámetros que le indicamos es mejor usar el script para ya tenerlos definidos y no hacerlo de nuevo cada vez que iniciamos el servidor.

Jesus ibanez

student•

ME sigue saliendo GET net::ERR_CONNECTION_REFUSED y no se como continuar. Esto es crítico para el curso o solo es a manera de ejemplo?

Diego Forero

Team Platzi•

Revisa que el server de estáticos este funcionando de manera correcta y debes poder hacer petición directa al servidor con el puerto 3001, recuerda que cuando corres el server debes decirle que puerto va a correr, si no por defecto corre en el puerto 3000

Jesus ibanez

student•

Voy siguiendo el curso y le puse el puerto 3001, me dice que me niega la conexión no que no está encontrando el archivo.

Iniciar un servidor de estáticos con zeit/list

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción