Configurar Webpack para el servidor de render

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

Resumen

Webpack trabaja con loaders, que ejecutan determinadas acciones dependiendo del tipo del archivo, en este video veremos como configurarlo para nuestro proyecto.

Si no te funciona el comando webpack debes instalarlo globalmente con sudo npm i -g webpack

Joel Humberto Gomez Paredes

student•

Por si a alguien le salio este error

ERROR in Entry module not found: Error: Can’t resolve ‘babel’

Cambien el loader por babel-loader

Bryam Rodriguez

student•

Yo tuve ese problema, muchas gracias!

José Alejandro Muñoz Ruiz

student•

esto debe ser por alguna actualización de webpack

Carlos Andrés Millan Satizabal

student•

Hola amigos: Para el día de hoy Marzo 28 del 2017, está la nueva versión 2.0 de Webpack, por lo tanto hay unos cambios, entre los cuales está en la parte del output del archivo de configuración. Webpack 2 ya no soporta rutas absolutas, para eso tenemos que instalar con npm una librería llamada path y configurar webpack de la siguiente forma:

const path = require('path')

module.exports = {
	entry: './source/server.js',
	output: {
		filename: 'index.js',
		path: path.resolve(__dirname, '../build/server'),
		publicPath: '/build/server/')
},
......
......
......
}

Sergio Daniel Xalambrí

student•

Path es un módulo nativo de Node.js, no hay que instalar nada desde npm. Solo importarlo.

Sobre el cambio, también hay que agregar -loader a todos los loaders que definamos.

Jonathan Ludeña

student•

const path = require('path');

module.exports = {
  entry: './source/server.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, '../build/server'),
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['latest-minimal', 'react']
        }
      }
    ]
  },
  target: 'node',
};

Arquimedes

student•

Falto instalar webpack en global

Leonardo Pineda

student•

Para los que quieran pueden configurar el package.json en el item scripts de esta manera para que escuche cambios en el server.js y en el build/server/index.js y así evitar empaquetar y levantar el server constantemente:

"scripts": {
    "build": "webpack -w",
    "start": "nodemon built/server/index.js"
  }

No olvidar cargar nodemon: npm i -D nodemon

Aldo Morales Saldarriaga

student•

Genial !!! :thumb

EdwinDeLeonG

student•

npm i -D babel-core babel-loader babel-preset-latest-minimal babel-preset-react json-loader

Harys Vizcaino Vizcaino

student•

Saludos si se encuentran con 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!’

traten que su archivo quede como este:

var path = require('path');

module.exports = {
  entry: './source/server.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, './built/server'),
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        query: {
          presets: ['latest-minimal', 'react']
        }
      }
    ]
  },
  target: 'node',
}

Juan Castro

teacher•

<h1>Intento usar webpack 2 y todo funciona bien, pero a los Links de react router les añade un " / " al principio, así que si tengo un link al home me manda fuera de la app…</h1>

Este es el código de webpack:

const config = {
  name: "server",
  entry: './src/server.jsx',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, '../build'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        // Options in ".babelrc" file
        // options: { presets: ['es2016', 'es2017', 'react'] },
      },
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  target: 'node'
}

Esto:

<Link to="/">Home</Link>

Lo vuelve esto:

<a href="//">Home</a>

Miguel Romero

student•

Yo lo monte asi:

<code> var path = require(‘path’);

module.exports = {
entry: ‘./source/server.js’,
output: {
filename: ‘index.js’,
path: path.resolve(__dirname, ‘…/built/server’),
},
module: {
…
</code>

Eso hizo que el bundle se creara desde la raiz del proyecto dentro del directorio establecido (built/server)

JESUS ALBERTO LOPEZ VILLATORO

student•

hola tengo un error

const server = _http2.default.createServer(requestHandler);
                              ^

TypeError: _http2.default.createServer is not a function

alguien mas le pasa
el archivo server

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';


function requestHandler(request, response) {
  const html = renderToString(
    React.DOM.h1(null, 'hola')
  );
}

const server = http.createServer(requestHandler)

server.listen(3000)

José Alejandro Muñoz Ruiz

student•

luego de hacer el bundler con webpack y levantar el server node, al ingresar a localhost:3000 me arroja el siguiente mensaje en la consola.

➜  proyecto-react node built/server/index.js
/Users/josemunoz/Documents/Code/proyecto-react/built/server/index.js:20528
  const html = (0, _server.renderToString)(_react2.default.Dom.h1(null, 'hola'));
                                                              ^

TypeError: Cannot read property 'h1' of undefined
    at Server.requestHandler (/Users/josemunoz/Documents/Code/proyecto-react/built/server/index.js:20528:63)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

acá el código de server/server.js

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server'

function requestHandler(request, response){
  const html = renderToString(
    React.DOM.h1(null, 'hola')
  );

  response.write(html);
  response.end();
}

const server = http.createServer(requestHandler);

server.listen(3000);

Sergio Daniel Xalambrí

student•

Según el mensaje de error parece que estás escribiendo React.Dom.h1 en vez de React.DOM.h1.

José Alejandro Muñoz Ruiz

student•

Toda la razón. Gracias!!!

Martín Varela

student•

Sergio, ¿cómo va? Primero excelente curso, felicitaciones.

Tengo una consulta:

No me queda clara la arquitectura de la aplicación. Vamos a renderizar todo desde el server? No entiendo porque a veces te refieres a cliente si se renderiza desde el server.

Gracias

Martín Varela

student•

@ sergiodxa

Sergio Daniel Xalambrí

student•

Se hace un render inicial en el servidor cuando el usuario entra al sitio y después cuando cambia de ruta se hace el render en el navegador (cliente).

Maximiliano Torre

student•

Al querer ejecutar webpack me genera el siguiente error:

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'babel-loader' instead of 'babel'.

Lo que hice fue editar el archivo webpack.server.config.js, actualizando el loader para jsx de la siguiente manera:

{
	test: /\.jsx?$/,
	loader: 'babel-loader',
	exclude: /(node_modules)/,
	query: {
		presets: ['latest-minimal', 'react']
	}
}

Si bien ahora puedo ejecutar webpack correctamente, ¿está bien?
Gracias.

Sergio Daniel Xalambrí

student•

Sí, antes era posible escribir solo babel, pero en la última versión es obligatorio agregar la palabra loader.

Guido Cavallo

student•

Esta es una forma de configurar webpack usando use.loader y use.option mas info en Webpack config module - rule-loader

module.exports = {
  entry: './source/server.js',
  output: {
    path: './built/server',
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.(json)$/,
        use: 'json'
      },
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['latest-minimal', 'react']
            },
          }
        ],
        exclude: /(node_modules)/
      }
    ]
  },
  target: 'node'
};

Alfredo Pezfred

student•

hay manera de configurar el Webpack para un entorno de desarrollo en el cual no entregue un solo archivo bundle si no que esten disponibles todos los archivos .JS para poder hacer debugg de la aplicación?

Manuel Agustín Vilte

student•

¿Qué nombre tiene lo siguiente?
/.jsx?$/
Es decir, ¿cómo se puede buscar más información acerca de cómo funciona esa parte del código?

Victor Hugo Cortés Posada

student•

Estoy viendo que el curso utiliza una versión Webpack muy antigua, ahora que instale webpack, observo que la versión es 3.6.0.
Tengo duda si la mejor manera de instalar sería con los códigos:

npm install --save-dev webpack
npm install --save-dev webpack-dev-server

//En el package.json colocar esta linea en el scripts
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"

Y mi otra duda es con babel si el comando recomendado a instalar sería el siguiente:

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Lorgio Ricardo Trinidad Caro

student•

Hola, tengo una consulta, estoy usando webpack 2.2.1, al ejecutar webpack, me arroja el siguiente resultado:

¿Por que esta incluyendo recursos distintos al ./src/server.js?

Muchas gracias

Sergio Daniel Xalambrí

student•

Son los módulos que importas en la aplicación desde node_modules, por ejemplo al hacer:

import React from 'react';

Lorgio Ricardo Trinidad Caro

student•

Gracias por la pronta respuesta, ¿Pero es correcto y por que la diferencia con el la salida tras ejecutar webpack con la version 1 del video?

Muchas gracias

Jorge Mario Carrillo Lopez

student•

Hola Sergio y Compañeros: Todo estaba bien hasta que intente correr webpack iMac-de-ALY:REHAPP PROMOCIONPUBLICITARIA$ webpack y me da -bash: webpack: command not found. ¿Falle en algo?

Sergio Daniel Xalambrí

student•

Si no te funciona el comando webpack debes instalarlo globalmente con sudo npm i -g webpack.

Jorge Mario Carrillo Lopez

student•

Volveré a empezar, 😄

Elias Ortega Ortega Ortega

student•

Porque sale este error ReferenceError: window is not defined cuando hago render en el server?

Elias Ortega Ortega Ortega

student•

Este error me sale cuando trato de usar bootstrap-sass, como puedo arreglarlo ???

Sergio Daniel Xalambrí

student•

Ese error significa que estás tratando de acceder al objeto window desde el servidor y no existe. Es posible que bootstrap-sass lo esté usando, lo que quiere decir que esta librería no es compatible con server render, mi recomendación es que les dejes un issue en su repositorio pidiendo que arreglen esto o que dejes de usarla, si no es compatible con server render probablemente estén haciendo algo mal en su código de todas formas.

Andrés Nava López

student•

Ya instale global webpack, ya lo instale en node_modules, y aún asi no funciona me sale lo siguiente:

C:\Users\ERIK\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186
                outputOptions.children = options.map(o => o.stats);
                                                       ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Sergio Daniel Xalambrí

student•

Como ya te respondi abajo, revisa la version de Node.js, el error que te da es porque tu version de Node no soporta arrow functions y Webpack internamente las esta usando, las versiones 6 y 7 (las actuales) ya la soportan.

Andrés Nava López

student•

No corre webpack 😦 , ya lo instale en node_modules, lo hice de manera global con npm i -g webpack y me sale lo siguiente:

$ webpack
C:\Users\ERIK\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186
                outputOptions.children = options.map(o => o.stats);
                                                       ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Mi cogido en la lectura que busca webpack (webpack.config.js) es este:

const server = require('webpack.config.server.js');
module.exports = [server, ];

y del lado del server

module.exports = 
{
	entry:'./source/server.js',
	output: {
		filename: 'index.js',
		path:'./built/server',
	},
	module: {
		loaders: [
		{
			test: /\.json$/,
			loader:'json',
		},
		{
			test: /\.jsx?$/,  //Signo de interrogacion indica que la x es opcional(para leer .jsx y .js)
			loader:'babel',
			exclude: /(node_modules)/,
			query: {
				presets:['latest-minimal', 'react']
			}
		}
		]
	},
	target: 'node',
};

Sergio Daniel Xalambrí

student•

Que version de Node.js usas? Revisa que tengas la 6 o 7, Webpack internamente usas arrow functions y al parecer la version de Node que usas no lo soporta.

Configurar Webpack para el servidor de render

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