Descubre la nueva versión: Curso de Server Side Render con Express. Estudia ahora
Curso de Server Side Render con Express 2019

Curso de Server Side Render con Express 2019

Instruido por:
Carlos Sampol
Carlos Sampol
Básico
2 horas de contenido
Configura Express y aplica SSR al proyecto de la Escuela de JavaScript PlatziVideo
Proyecto del curso
Configura Express y aplica SSR al proyecto de la Escuela de JavaScript PlatziVideo

Has trabajado mucho para llegar a este punto, aquí inicia tu formación como desarrollador FullStack JavaScript. Con el proyecto PlatziVideo componentizado e implementado en React vas a crear el servidor y configurar todos los archivos necesarios para que hagas renderizado del frontend desde el servidor.

Curso de Server Side Render con Express 2019

Curso de Server Side Render con Express 2019

Progreso del curso:0/22contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/22contenidos(0%)

Primeros pasos

¡Vamos a renovar este curso!

00:42 min

Material Thumbnail

Introducción y presentación del curso

01:16 min

Material Thumbnail

¿Qué es Server Side Rendering?

05:58 min

Material Thumbnail

Babel, Express y React

02:58 min

Material Thumbnail

Creación del proyecto base

11:15 min

Material Thumbnail

Configuración de ESLint con Webpack

06:22 min

Material Thumbnail

Preparación de Webpack, Babel, PostCSS y Assets

05:06 min

Material Thumbnail

Usando Plugins y vendor file en Webpack

09:15 min

Material Thumbnail

Integración de Webpack con Express

09:08 min

Integración de Express con React

Material Thumbnail

Servir React con Express

07:05 min

Material Thumbnail

Agregando variables de sass desde webpack

05:04 min

Material Thumbnail

Aplicando history y creando rutas para el servidor

08:26 min

Material Thumbnail

Haciendo initialState accesible y configurando Redux DevTools

07:19 min

Aplicar Server Side Rendering

Material Thumbnail

Definiendo la función main para renderizado desde el servidor

10:16 min

Material Thumbnail

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

06:20 min

Material Thumbnail

Assets require hook

03:00 min

Material Thumbnail

Hydrate y estado de Redux desde Express

07:45 min

Trabaja con entornos de desarrollo y producción

Material Thumbnail

Configurando nuestro servidor para producción

04:18 min

Material Thumbnail

Configurando el frontend y webpack para producción

08:19 min

Material Thumbnail

Compresión de Assets

07:28 min

nuevosmás votadossin responder
Enrique Devars
Enrique Devars
Profesor

¿Cómo podría usar el HMR del lado del cliente?

1
Jorge Méndez Ortega
Jorge Méndez Ortega
Estudiante

Que es mejor utilizar Vendor o DLL ya que entiendo que es prácticamente lo mismo solo que para el DLL se genera el empaquetada a parte esto es lo que le permite mejorar tiempos de transpiración y dicho archivo también tiene el código de las dependencias utilizadas.

2
Rafael Guzmán Barranco
Rafael Guzmán Barranco
Estudiante

Quien tiene el código final del proyecto?

2
Jorge Salamanca
Jorge Salamanca
Estudiante

De donde salió yarn? Lo veo por todas partes yarn.lock, yarn para instalar… que estodo eso, además la estructura de carpetas esta lejos de ser como se dejo en el curso de Oscar…

3
baenacc
baenacc
Estudiante

Tengo este archivo webpack.config.js

plugins: [
    isProd
      ? new CompressionPlugin({
          test: /\.js|\.css/,
          filename: '[path].gz',
        })
      : false,
    isProd ? new ManifestPlugin() : false,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()],
      },
    }),
    new MiniCssExtractPlugin({
      filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
    }),
  ],
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[0] should be one ofthese:
   object { apply, … } | function
   -> Plugin oftype object or instanceof Function
   Details:
    * configuration.plugins[0] should be an object.
      -> Plugin instance
    * configuration.plugins[0] should be an instance of function
      -> Function acting as plugin
 - configuration.plugins[1] should be one ofthese:
   object { apply, … } | function
   -> Plugin oftype object or instanceof Function
   Details:
    * configuration.plugins[1] should be an object.
      -> Plugin instance
    * configuration.plugins[1] should be an instance of function
      -> Function acting as plugin
    at webpack (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/webpack/lib/webpack.js:31:9)
    at Object.<anonymous> (/home/alvaro/Documents/proyecto-buscador-v2/buscador/src/server/server.js:20:20)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Module._compile (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Object.newLoader [as .js] (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Module.require (internal/modules/cjs/loader.js:864:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/alvaro/Documents/proyecto-buscador-v2/buscador/src/server/index.js:13:1)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1051:12)
1
baenacc
baenacc
Estudiante

En mi archivo webpack.config.js tengo la siguiente configuración:

plugins: [
    isProd
      ? new CompressionPlugin({
          test: /\.js|\.css/,
          filename: '[path].gz',
        })
      : false,
    isProd ? new ManifestPlugin() : false,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()],
      },
    }),
    new MiniCssExtractPlugin({
      filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
    }),
  ]

y me sale el siguiente error:
console

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[0] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[0] should be an object.
      -> Plugin instance
    * configuration.plugins[0] should be an instance of function
      -> Function acting as plugin
 - configuration.plugins[1] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[1] should be an object.
      -> Plugin instance
    * configuration.plugins[1] should be an instance of function
      -> Function acting as plugin
1
edwintrumpet
edwintrumpet
Estudiante

¿Por qué en el archivo .babelrc se usan esos paquetes y se instalan con nombres diferentes?
Usualmente uno instala los paquetes con los mismos nombres y me dio dificultad porque no los encontré, pero instalé otros y funcionaron.
Instalé

npm i babel-plugin-transform-class-properties react-hot-loader babel-plugin-transform-object-assign -D
1
Yesenia Sánchez E.
Yesenia Sánchez E.
Estudiante

Alguien que pueda hecharle un ojo a mi repo por favor, al hacer npm run start:dev, no me marca ningún error, solo algunos warnings pero no me muestra nada en localhost, ya estuve buscando pero no encuentro como resolverlo.
¡¡GRACIAS!!

2
baenacc
baenacc
Estudiante

Tengo una duda, me daba la impresión de que react-router es una versión mas antigua de react-router-dom, no entiendo muy bien por que se usan los dos paquetes.

1
Eider Mejia Mejia
Eider Mejia Mejia
Estudiante

Muy buen curso pero aun no han tocado el tema de datos persistentes en el cliente y en el servidor. por ejemplo como guardaria un jwt-token para poder usarlo con mi ssr

1