Actualizando dependencias en NPM

Clase 4 de 22 • Curso de Server Side Render con Express

Nelson Cadenas

student•

++Resumen de la clase:++

Buscamos un proyecto que contenga react, react-router y redux.
Creamos una nueva rama del proyecto con: git checkout -b nombre_rama
Verificar las ramas que hay que actualizar: npm outdated
Para actualizar la aplicación ingresamos: npm update
Para verificar si hubo actualización de paquetes, lo hacemos con: git status
Para verificar las dependencias actualizadas, ingresamos: git diff
Volvemos a verificar las dependencias que tenemos que actualizar con: git outdated
Hay dependencias que no se pueden actualizar directamente con el comando git update, porque estas dependencias tienen otras dependencias que pueden estar siendo utilizadas por otras dependencias.
Corremos la aplicación (npm run start) para verificar que todavia funciona la aplicación y que el proceso de actualización de dependencias se realizó exitosamente.

Javier Armando Vargas Vega

student•

Excelente resumen

Esteban Casallas

student•

buenísimo, gracias !

Diego Osorio

student•

Repositorio Github

https://github.com/platzi/PlatziVideo

Juan Burns

student•

Para el que llegó aca y se confundio un poco, o no tiene el proyecto hecho en react le comento lo que puede hacer:

1-Descargar el proyecto en la rama router-redux 2-Posicionarse en la consola dentro del proyecto 3-Crear una rama con el comando "git checkout -b feature/server-side-render-2020" (este comando crea la rama y se posiciona dentro) 4-Revisar las actualizaciones de las dependencias con el comando "npm outdated" 5-Actualizar dependencias con el comando "npm update" 6-Iniciar el proyecto "npm run start"

A mi me habia confundido un poco porque me habia olvidado como funcionaba git, pero para que no les sea dificil entender este video les mando esto. Saludos!.

Marcelo Oggero

student•

Puede ser que entre 2 y 3 haya que hacer "git init"?

Jaime La Rosa

student•

No es necesario un git init ya que te estas trayendo un repositorio de github por lo tanto ya git esta inicializado

Jean Nuñez

student•

npm outdated para ver las librerias que debe ser actualizadas

Armando Chindoy

student•

Para los que tengan problemas con npm install y les salga el siguiente error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: PlatziVideo@1.0.0
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   eslint@"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   eslint-config-airbnb@"^17.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/armando/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/armando/.npm/_logs/2021-02-19T14_55_51_707Z-debug.log

esto sucede ya que se está usando una version de npm distinta con la cual se manejaron esas dependencias pero tranquilos puede usar el siguiente comando:

npm install --save --legacy-peer-deps

Fabricio Dupraz

student•

Ya hice eso y ahora me salta esto

npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/USUARIO/Curso/curso-express/node_modules/ajv
npm ERR! dest /mnt/c/Users/USUARIO/Curso/curso-express/node_modules/.ajv-1M62gxY0
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/mnt/c/Users/USUARIO/Curso/curso-express/node_modules/ajv' -> '/mnt/c/Users/USUARIO/Curso/curso-express/node_modules/.ajv-1M62gxY0'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabricio/.npm/_logs/2022-03-22T12_02_43_119Z-debug.log

Andrés Orozco

student•

Para los que tienen problema con la actualización e instalación de dependencias pueden intentar lo siguiente:

Instalamos el paquete npm-check-updates

npm install -g npm-check-updates

Lo ejecutamos

ncu -u

Procedemos a instalar las nuevas versiones de las dependencias.

npm install

Cambiamos el script start, ya que el anterior esta deprecado.

"start": "webpack serve --open --mode development"

Ruben Abreu

student•

Gracias, esto fue de mucha ayuda.

Lorena Andrea Cárcamo Herrera

student•

Gracias, me sirvió mucho eres un sol

Oscar Andrés Ortegano Mora

student•

Para el setup inicial sin nada es recomendable:

git clone https://github.com/platzi/PlatziVideo.git .
git checkout origin/feature/router-redux para iniciar desde la misma ramade Carlos
git checkout -b feature/server-side-render-2020
npm install (Instala las dependencias)
npm outdated (Verifica que dependencias necesitan ser actualizadas)
npm update (Actualiza las dependencias que no tengan un Major update)
npm outdated (Va a mostrar solo las dependencias que no se actualizaron por ser un Major update de acuerdo a su numero de version)
npm run start (Inicia la aplicacion)

Nota:

Software versioning

In version 1.9.0.1:

1: Major revision (new UI, lots of new features, conceptual change, etc.)

9: Minor revision (maybe a change to a search box, 1 feature added, collection of bug fixes)

0: Bug fix release

1: Build number (if used)—that's why you see the .NET framework using something like 2.0.4.2709

Karina Magaly Marroquín García

student•

tu aporte me sirvio mucho, gracias

Michael Arias Fajardo

student•

Tu aporte me ha sido util :v

Neryt Alexander Herrera Iñiguez

student•

Si alguien como yo tiene un monton de problemas con el solo hecho de hacer npm install, borren el package-lock.json 💜

Sebastián Plazas

student•

Muchas gracias por tu respuesta, me sirvió mucho

Luis Andrade

student•

Para los que tienen problema en con las dependencias, arrancar el servidor

Aqui tienen el package.json del profesor

{
  "name": "PlatziVideo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-eslint": "^10.0.3",
    "classnames": "^2.2.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.0",
    "md5": "^2.2.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "file-loader": "^4.3.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.13.1",
    "sass-loader": "^7.3.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

Luego instalen json-server

npm install json-server

Agreguen al package.json el comando

"json": ""json-server initialState.json"

Ya luego ejecutan en consolas diferentes los comandos

npm run json
npm run start

Pablo Nicolás Alonso

student•

Hice todo lo que hizo el profesor pero: al momento de poner npm update:


npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: PlatziVideo@1.0.0
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   eslint@"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   eslint-config-airbnb@"^17.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Debe ser que alguna dependencia de dependencia no existe más y no sabe qué hacer.

Pablo Nicolás Alonso

student•

Borre algunas dependencias del package.json como node-sass y cuando lo instalo me dice que necesito la versión 4.0.0. Desinstalo e instalo esta versión, pero me da error, no me deja instalarlo parece que las dependencias de las que depende node-sass no las encuentra o están muy "deprecated" :(

Miguel Hernández

student•

El problema de node-sass es que esta obsoleto, instala dart-sass

npm i sass -D

Marcos Mercado Coca

student•

¿Es más recomendable hacer ssr cuando el front y el back están terminados o hacerlo mientras se desarrola?

Luis Lira

student•

Hola!

Esto dependerá del requerimiento que tengas del proyecto. Si es un proyecto que desde anets de comenzarlos se determinar que debe tener SSR, lo mejor sería empezar el proyecto directamente con la configuración para esto.

Además, también puedes usar framework de Fronmtend que ya hacen por defecto el SSR, como Next. Nux y Gatsby (en este debes configurarlo).

Michael Arias Fajardo

student•

Seguir estos pasos en 2022:

Clonar repositorio clase:

    git clone https://github.com/platzi/PlatziVideo.git

Cambiar a la rama deseada:

git checkout origin/feature/router-redux

Actualizar dependencias a 2022. Archivo package.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode development",
    "json": "json-server initialState.json"
  },
 "dependencies": {
    "babel-eslint": "^10.1.0",
    "classnames": "^2.3.1",
    "eslint": "^8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "json-server": "^0.17.0",
    "md5": "^2.3.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.6.0",
    "webpack": "^5.7.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }

Instalar con:

npm install --save --legacy-peer-deps

Reempplazar en el archivo routes/App.js, la palabra "Switch" por la palabra "Routes"
Correr los scripts en dos terminales en paralelo:

npm run json

npm run start

Michael Arias Fajardo

student•

Asi nos queda el Router con las dependencias actualizadas:

<BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home></Home>} />
        <Route path="/login" element={<Login></Login>} />
        <Route path="/register" element={<Register></Register>} />
        <Route path="/player/:id" element={<Player></Player>} />
        <Route path="*" element={<NotFound></NotFound>} />
      </Routes>
    </Layout>
  </BrowserRouter>

Jeiner Muñoz Olivera

student•

No me funcionó, pero lo solucioné así.

1.- Nos situamos en nuestro proyecto y borrar package-log.json 2.- Instalar dependencias: npm install 3.- Revisar si están actualizadas las dependencias con el comando npm oudated. 4.- Actualizar dependencias npm update 5.- Inicializar, en una terminal, la FAKE API: json-server initialState.json 6.- En otra terminal, correr proyecto: npm run start

Jesús Manuel Mejía Rojas

student•

Me funciono sin el punto 5, pero recomiendo que al momento de la update utilicen este comando

npm update --legacy-peer-deps

Luis Fernando Méndez González

student•

Solo por aprender el shortcut de "gco" ya valió la pena esta clase.

Neryt Alexander Herrera Iñiguez

student•

Soy el unico que al ejecutar:

npm run start

le aparece algo como: Access Error: 404 -- Not Found Cannot locate document: / ?

Hans Roche

student•

Se les olvido mencionar que hay que lanzar la fake API, siempre se les olvida más de algo o hacen cosas que no muestran y luego uno tiene que estar buscando como hacer que las cosas funcionen.

Solo ejecuta este cóodigo en otra terminal

json-server  initialState.json

Victor Baruch Pazaran Jaimes

student•

Gracias, justo estaba batallando con eso

Cristian Daniel Jesus Rios

student•

IMPOSIBLE replicar el repo, alguein pudo?

Carlos Eduardo Gomez García

teacher•

¡Hola!, abajo en la sección de recursos tienes un botón de "Descargar todo", ¿pudiste descargarlo?

Cristian Daniel Jesus Rios

student•

Si obvio, pero se rompe todo aunque actualice, update, instale, etc...etc... y no me sirve xq no levanta. con el npm run... :/

Marco Andres Vasquez

student•

¿en que curso crean ese proyecto desde cero?, seria un requisito pasar dicho curso antes de este?

Omar Daniel Centeno

student•

Hola

No creo que sea necesario, más bien sirve mucho hacer los pasos que presenta el profesor que te ayudarán cuando tú quieras trabajar sobre el proyecto que alguien más haya creado. Creo que el proyecto que presenta es del Curso de React Router y Redux 2019, el curso original del proyecto me parece que fue dado de baja.

Saludos

Diego Andres Valderruten Vargas

student•

hola, al intentar levantar el servidor me genera el siguiente error:

 PlatziVideo@1.0.0 start
> webpack-dev-server --open --mode=development

internal/modules/cjs/loader.js:888
  throw err;
  ^

Error: Cannot find module '../lib/Server'

que debo hacer?

Gracias

Diego Andres Valderruten Vargas

student•

pude resolver, borre manualmente la carpeta de node_modules en el proyecto, y después instale nuevamente npm. Ps al final funciono, de arepa tal vez!

Luis Berenguer

student•

No puedo instalar las dependencias, luego no puedo continuar con el proyecto 😐

Ángel de Jesús Avendaño Cruz

student•

Tube un problema muy raro con XCode, lo solucioné asi:

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

Fuente

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: PlatziVideo@1.0.0
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   eslint@"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   eslint-config-airbnb@"^17.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/armando/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/armando/.npm/_logs/2021-02-19T14_55_51_707Z-debug.log

npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/USUARIO/Curso/curso-express/node_modules/ajv
npm ERR! dest /mnt/c/Users/USUARIO/Curso/curso-express/node_modules/.ajv-1M62gxY0
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/mnt/c/Users/USUARIO/Curso/curso-express/node_modules/ajv' -> '/mnt/c/Users/USUARIO/Curso/curso-express/node_modules/.ajv-1M62gxY0'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabricio/.npm/_logs/2022-03-22T12_02_43_119Z-debug.log

{
  "name": "PlatziVideo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-eslint": "^10.0.3",
    "classnames": "^2.2.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.0",
    "md5": "^2.2.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "file-loader": "^4.3.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.13.1",
    "sass-loader": "^7.3.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: PlatziVideo@1.0.0
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   eslint@"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.19.1 || ^5.3.0" from eslint-config-airbnb@17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   eslint-config-airbnb@"^17.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode development",
    "json": "json-server initialState.json"
  },
 "dependencies": {
    "babel-eslint": "^10.1.0",
    "classnames": "^2.3.1",
    "eslint": "^8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "json-server": "^0.17.0",
    "md5": "^2.3.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.6.0",
    "webpack": "^5.7.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }

<BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home></Home>} />
        <Route path="/login" element={<Login></Login>} />
        <Route path="/register" element={<Register></Register>} />
        <Route path="/player/:id" element={<Player></Player>} />
        <Route path="*" element={<NotFound></NotFound>} />
      </Routes>
    </Layout>
  </BrowserRouter>

Actualizando dependencias en NPM

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas