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

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

Resumen

Vamos a crear nuestro archivo cliente para la aplicación.

Debemos instalar nuestro plugin para manear componentes npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

Daniel Gonzalez Blanco

student•

Buenas, conceptualmente me pierdo en este video, seguramente por falta de fundamentos, pero tengo varias dudas:

Porque necesitamos un servidor de estaticos?
Que finalidad tiene Layout.jsx?

Seguramente sean conocimientos basicos que me faltan pero agradeceria que se ampliara un poco la explicación.

Gracias de antemano

Sergio Daniel Xalambrí

student•

El servidor de estáticos se encarga de que puedas cargar archivos CSS, JS, imágenes, etc. en tu página web.

Apache es un servidor de estáticos, lo mismo NGINX, Django tiene su propia forma de servir estáticos, igual Express.js, en este caso usamos una librería para tener el servidor simplemente en la carpeta de nuestro estáticos sin configurar nada ni agregar líneas de código adicionales.

El componente Layout.jsx es donde va a estar la etiqueta head, los script, los link para estilos, las etiquetas meta, el title y otras etiquetas HTML.

Daniel Gonzalez Blanco

student•

Buenas Sergio, es seguro para una aplicacion en produccion utilizar el metodo que indicas dagerouslySetInnerHtml??

En caso afirmativo, que metodos tendriamos que aplicar del lado del servidor para paliarlos?.

Se podria utilizar otro metodo para renderizar nuestro html o es recomendable utilizar este?

Gracias de antemano

Darwin Yusef Gonzalez

student•

No se si sea el único pero, “NO ENTIENDO AYUDAA” se complico todo a partir de aqui, alguien que me explique con plastilina…

Henry Tabima Giraldo

student•

cuando te conectas a una pagina web, lo que haces es una petición a un servidor por medio de una url. cuando se trata de paginas estáticas, el servidor simplemente te devuelve unos contenidos estáticos (html, css, js, imágenes, etc), por cada dirección url, que el navegador procesa para mostrate las cosas. Con node y el archivo server.js ya transpilado lo que estamos haciendo es simular las funciones del servidor, pero en este caso no solo sirve contenidos estáticos, sino que, según la petición que se hace en la url, realiza un primer render de la pagina, y luego se te envía el primer render, mientras descarga el js que se va a encargar del renderizado de ahi en adelante. lo que se hizo en el vídeo es justamente configurar webpack, para que genere el bundle que se va a servir como el archivo estático que se encargara del render una vez sea descargado.

Espero haber ayudado a entender un poco mejor

Dante Jauregui Yallico Jauregui Yallico

student•

Holas! una pregunta
entonces el render por lado del servidor sólo seria para la carga inicial? o para que más? 😃

Sergio Daniel Xalambrí

student•

Sí el render del lado del servidor es para solo para la carga inicial.

Daniel Gonzalez Blanco

student•

Buenas Sergio,

¿Por que necesitamos configurar la parte cliente y la parte server?¿No valdria solo con la parte del server?
Sigo si entender porque se renderiza parte de la aplicacion en el server.js y tambien tenemos otro render en la parte client.js.

Si pudieras dar una explicacion basica que explique conceptualmente la arquitectura de la app te lo agradeceria.

Gracias y saludos,

Sergio Daniel Xalambrí

student•

En el servidor hacemos el render inicial de la aplicación cuando el usuario recién entra a la página.

En el cliente hacemos luego el render para que cualquier nuevo dato que llegue se renderice por React y además para que el cambio de rutas y realice en el navegador, de forma que el usuario no tenga que recargar la página, simplemente cargamos los datos vía AJAX y los renderizamos.

Federico Villa

student•

El render por lado del servidor sólo es para la carga inicial?

Jesus ibanez

student•

Me dice localhost/:1 GET http://localhost:3001/app.js net::ERR_CONNECTION_REFUSED.

Carlos Sampol

Team Platzi•

Por favor, podrias compartir tu archivo apps.js

Santiago Jimenez Giraldo

student•

Después de hacer el layout no me hace render de ninguno de los componentes, aunque descargue el proyecto del curso, alguna solucion para esto ??

Sergio Daniel Xalambrí

student•

Ves algún error en la consola de Node.js o del navegador? Trata de subir los archivos que tengas a Github para poder verificarlos.

Santiago Jimenez Giraldo

student•

Claro que si, este es mi repo vi version de npm es 3.8.10 y mi version de node es 6.9.1

Martín Varela

student•

Sergio, configuré todo igual(excepto que estoy usando la última versión de react-router). Webpack me genera perfectamente, tanto el server como el statics.

Pero al abrir la url desde el navegador, en la consola de nodejs me da el siguiente error:

buffer.js:191
    throw new TypeError('"encoding" must be a valid string encoding');
    ^

TypeError: "encoding" must be a valid string encoding
    at fromString (buffer.js:191:11)
    at Function.Buffer.from (buffer.js:99:12)
    at createWriteReq (net.js:755:45)
    at Socket._writeGeneric (net.js:706:11)
    at Socket._write (net.js:729:8)
    at doWrite (_stream_writable.js:333:12)
    at writeOrBuffer (_stream_writable.js:319:5)
    at Socket.Writable.write (_stream_writable.js:246:11)
    at Socket.write (net.js:656:40)
    at ServerResponse.OutgoingMessage._writeRaw (_http_outgoing.js:170:23)

Qué podrá ser?

Gracias,
Martín

Martín Varela

student•

Ya lo solucioné, en el archivo server.js, tenía el renderToStaticMarkup así:

      renderToStaticMarkup(
        <Layout 
          title='Hola devs' 
          content={html} 
        />,
	html
      )

Y va así:

      renderToStaticMarkup(
        <Layout 
          title='Hola devs' 
          content={html} 
        />
      )

Disculpa las molestias,
Gracias.

Dante Jauregui Yallico Jauregui Yallico

student•

cuando se debe trabajar con un sistema de modulos (por ej CommonJS)?? Agradezco estar actualizandonos, el temas es saber cuando usarlos 😃

Sergio Daniel Xalambrí

student•

Cuando? Siempre que quieras hacer una aplicación deberías usar módulos para facilitar el desarrollo.

Bruno Cicerchia

student•

Siempre que intento ejecutar “webpack -w” me tira este error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration[0].output.path: The provided value “./built/server” is not an absolute path!
configuration[1].output.path: The provided value “./built/statics” is not an absolute path!

La unica solucion que encontre es copiar la carpeta de node_modules de los archivos del curso. Pero esto ocurre cada vez que hago alguna modificacion o instalo alguna libreria nueva desde npm. Alguna sugerencia?

Diego Forero

Team Platzi•

En tu configuración de webpack tienes que poner la ruta absoluta para built/server y built/statics, esas usando rutas relativas y por eso es el error.

Francisco J Jimenez H

student•

una pregunta, el cliente lo creamos para los archivos que consumira por el lado del cliente y el de server para el lado del servidor o como es ? gracias 😃

Diego Forero

Team Platzi•

Hola, al final tu subes todos los archivos al servidor (hosting) la diferencia entre los archivos del cliente y del servidor son que los archivos de servidor los ejecutas o corres en tu server, y los archivos del cliente se sirven para que el cliente descarge ese archivo y se ejecute en su navegador.

Francisco J Jimenez H

student•

muchas gracias ya lo entendi 😃

Guillermo Camarena Miramontes

student•

Al intentar instalar: npm install --save-dev babel-plugin-transform-es2015-modules-commonjs me sale este error:

notsup Not compatible with your operating system or architecture: fsevents@1.1.2

ha alguien le ha pasado?

Diego Forero

Team Platzi•

No te preocupes es una librería que viene como dependencia para algunos sistemas operativos, más que error es un warning.

KaMi lml

student•

Hola. Soy otro más de los que se pierde aquí 😦

No logro entender en qué parte se especifica qué cosa se renderiza en servidor y qué cosa se renderiza en navegador. Quién o qué define eso?

Por otro lado, yo uso react-helmet para renderizar todo lo que esta por fuera de la etiqueta body, pero me he dado cuenta que cuando le hacen scraping a mi página o reviso el código fuente, este no cambia de verdad… es como si fuera solo visual pero el código html no cambia. Eso me trae problemas porque quiero que facebook me haga scraping correctamente y no se puede.

Es por eso que quiero entender bien esto de renderizar la parte de fuera del body y entender bien cómo es que controlo qué cosa renderiza desde el servidor y qué cosa no.

Gracias.

Henry Tabima Giraldo

student•

el servidor renderiza la primera peticion.

por ejemplo, abro el navegador y entro a my-react-app.com ; aqui el servidor realizaria el render del la ruta ‘/’ y me la enviaria mientras me envia el bundle de la aplicacion.

digamos que ya me cargo todo, y ahora le doy a un link que me lleva a ‘/about’; como ya tengo descargado el bundle, la pagina correspondiente a la ruta sería resderizada en el navegador

si por ejemplo vuelvo a la ruta ‘/’ desde ‘/about’ el renderizado se realizaria por el navegador (porque ya tengo el bundle descargado)

una vez se recibe el primer render y la aplicacion en el bundle, los rederizados se hacen en el navegador

KaMi lml

student•

Entonces yo no elijo quién renderiza, sino que siempre será la primera carga desde el servidor y todo lo demás el navegador?

Me parece que no es del todo acertado. Cuando tengo un html plano en el que incrusto el bundle js, lo que sucede es que el navegador se descarga ambos archivos como estáticos.
Luego el navegador renderiza todo. Yo he hecho una página así y la tengo subida en firebase. Ingresa a https://dotastore.pe/ por favor.

Entonces, al final no se cómo controlar qué parte quiero que renderice el servidor 😕

Alexander Silvera

student•

Pregunta si el “dangerouslySetInnerHTML” es peligroso de usar por tema de seguridad porque lo estamos usando??
Y si la aplicación la lanzamos a producción deberíamos de usarla??
Y si no la usamos que deberíamos de usar en su lugar??
Disculpen tantas peguntas pero no me quedo muy claro el tema.

Devels yaencontre

student•

No puedo cargar los estáticos. La página funciona pero el app.js no lo carga. El error en consola es el siguiente:
app.js:1 Uncaught SyntaxError: Unexpected token <
De hecho, si intento ir a la url “http://localhost:8888/app.js” me devuelve la página:
Error 404
Back to home

Diego Forero

Team Platzi•

Tienes un error de digitación en el archivo app.js en la linea 1

Devels yaencontre

student•

La linea 1 es:

<html><head><meta charset=“utf-8”/><meta name=“viewport” content=“width=device-with, initial-scale=1.0, minimum-scale=1.0”/><title>Aplicación</title><link rel=“stylesheet” href=“<https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css>”/></head><body><div id=“render-target”><main role=“application” data-reactroot="" data-reactid=“1” data-react-checksum=“177881385”><section name=“error404” data-reactid=“2”><h1 data-reactid=“3”>Error 404</h1><a href="/" data-reactid=“4”>Back to home</a></section></main></div><script src=“<http://localhost:8888/app.js>”></script></body></html>

El problema es que mi servidor no es capaz de servir la ruta http:/local…:8888/app.js
supongo que faltara configurar algo… pero que?

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

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

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS