Migración y Optimización de Proyectos con Webpack 5

Clase 7 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Resumen

¿Cómo actualizar un proyecto a Webpack 5 y React 17?

Actualizar tu proyecto a las últimas versiones de herramientas y bibliotecas es crucial para mantenerlo eficiente y seguro. En este caso, vamos a explorar el proceso de actualización de un proyecto utilizando Webpack 5 y React 17 para optimizar su rendimiento y características. Platiquemos sobre el proyecto Platzi Store, con el que llevaremos a cabo la actualización.

¿Qué es Platzi Store y cómo configurarlo?

Platzi Store es un proyecto utilizado en varios cursos para aprender sobre pruebas unitarias, herramientas como Webpack, y otros conceptos avanzados de desarrollo. Lo primero es acceder a este proyecto mediante un clon o fork desde su repositorio, que puedes encontrar en la sección de enlaces del curso.

Clonar el proyecto: Utiliza el comando git clone URL donde URL es la dirección del repositorio de Platzi Store.
Acceder a la carpeta del proyecto: Abre el terminal y navega a la carpeta con cd platzi-store.
Abrir el proyecto en un editor: Puedes utilizar Visual Studio Code o cualquier editor de tu preferencia con code . para abrir el proyecto.

¿Cómo revisar y entender la configuración actual del proyecto?

Antes de hacer cualquier actualización, es esencial entender cómo está configurado actualmente el proyecto:

Archivos importantes: Verifica el README.md para instrucciones básicas y el archivo package.json para entender las dependencias y scripts que se ejecutan.
Configuraciones de Webpack: Este archivo define puntos de entrada y salida, extensiones a trabajar (como .js y .jsx), loaders y plugins que optimizan y procesan el proyecto.

¿Qué hay que actualizar en Webpack y React?

A continuación, verás qué dependencias necesitas actualizar para aprovechar las características más recientes:

Webpack: Actualizar a Webpack 5 es esencial, junto con su CLI y varios plugins.
React: Mover a React 17 y sus bibliotecas asociadas, como react-dom y react-redux, también es primordial.

¿Cómo realizar la actualización de Webpack y sus componentes?

Para asegurarte de que todo está actualizado a las versiones más recientes, ejecuta los siguientes comandos en la terminal:

npm install webpack@latest webpack-cli@latest babel-loader@latest webpack-plugin@latest mini-css-extract-plugin@latest

Esto te garantizará tener las versiones más recientes y resolver cualquier incompatibilidad.

¿Cómo actualizar React y sus dependencias relacionadas?

De manera similar, realiza la actualización de React ejecutando:

npm install react@latest react-dom@latest react-router@latest react-redux@latest redux@latest

¿Qué pasos seguir después de la actualización?

Una vez actualizadas las dependencias, asegúrate de configurar Webpack correctamente para el desarrollo local. En Webpack 5, el uso de webpack-dev-server ha cambiado, ahora simplemente deberías usar webpack serve.

¿Cómo revisar que todo funcione correctamente?

Finalmente, ejecuta el proyecto para verificar que todo esté en orden:

npm run start

Este comando compilará tu proyecto y abrirá el navegador en el puerto configurado para el desarrollo local, permitiéndote ver y probar tu aplicación actualizada. Es un buen momento para realizar pruebas exhaustivas y verificar que no haya errores en las rutas o sistemas de estado de Redux integrados.

Con el proyecto ahora actualizado y corriendo adecuadamente, estamos listos para optimizar aún más y seguir explorando mejores prácticas en el desarrollo moderno. ¡Continúa aprendiendo y mejorando tus habilidades!

Comentarios

Luis Fernando Nuñez Rangel

student•

Cambios en React-router-dom

Como sabemos hemos actualizado la mayoria de nuestras dependencias en el proyecto de Platzi Store, lo cual conlleva a analizar si se han realizado ciertos cambios.

El cambio mas notorio es que Switch ya no es un modulo exportado de react-router-dom y ha sido remplazado por Routes en la nueva version

Ademas de unos cambios pequeños a la hora de definir las rutas de la app

Cambiando de esto:

<Route exact path='/' component={Home} />

A esto :

<Route exact path='/' element={<Home />} />

y para definir el default de la ruta en caso del notFount usaremos el path *

<Route path ='*' element={<NotFound />} />

Eliaz Bobadilla

student•

Si es que alguien obtiene un error como: Attempted import error: 'Switch' is not exported from 'react-router-dom'

Chequen: https://stackoverflow.com/questions/63124161

Jesus Heriberto Lara Juarez

student•

eres el me mejor amigo

Paolo Joaquin Pinto Perez

student•

++Migracion de Webpack 4 a Webpack++

Después de tener ya el proyecto en nuestro entorno de desarrollo.

Actualizamos. Webpack y plugins:

npm install webpack@latest webpack-cli@latest babel-loader@latest html-webpack-plugin@latest mini-css-extract-plugin@latest

React:

npm install react@latest react-dom@latest react-router-dom@latest react-redux@latest redux@latest

y npm install Importante: en package.json: Cambiamos:

"start": "webpack-dev-server --open --mode development",

Cambió, desde webpack 5 ya es:

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

y npm run start

Jesus Heriberto Lara Juarez

student•

muy buena sintesis de la clase

Diego Giraldo Ramirez

student•

Para esta fecha donde estamos usando React 18, React Router Dom 6, React-redux 8, Webpack 5, etc... Para poder avanzar en esta clase, y recopilando las soluciones que leí de los otros compañeros, este es el paso a paso para lograr que el proyecto funcione.

Primero cambiar la forma de importar, y llamar dependencias en el index.js:

import ReactDOM from 'react-dom/client';
import { legacy_createStore as createStore } from 'redux';

Instalar la última versión del Webpack dev server:

npm i webpack-dev-server@latest

Cambiar el Switch por Routes en el archivo de App.jsx donde se listan las rutas de la aplicación

Alejandro Álvarez Uribe

student•

Además en el archivo App eliminar "exact" y cambiar "component por element" de cada componente <Route> Quedaría de la siguiente manera:

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

ESTEBAN SALAZAR ZAPATA

student•

Para la nueva version de React (18 al crear este comentario) se debe actualizar el index.js. Porque con react 18 se cambio la forma de iniciar el root para el React app

Tienes que cambiar a esto:

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Jhonatan Celis Rincón

student•

Aun no entiendo bien React pero a la fecha de hoy no me funcionó y viendo los aportes entiendo que algo se actualizó. Lo que se encarga de las rutas cambió por esa razón debe modificar en App.jsx Switch por Routes:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/checkout' element={<Checkout />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

Diego Vergara

student•

Si tienen problemas con webpack-cli cuadno hace npm start deben instalar la ultima version de webpack-dev-server

npm i webpack-dev-server@latest

Paolo Joaquin Pinto Perez

student•

++Haciendo Fork al Proyecto++

1.- En Github le haces Fork ( clickeas el icon del fork)

2.- git clone https://github.com/gndx/platzi-store ó la url de tu fork. Pd: No hace falta hacer git reset "id-del-commit", porque el profesor en el branch master esta con el commit de esta clase. y hay otro branch con los commit de clases posteriores llamado clase/10

Pero por si tienen algún problema: 3.- Para que regresen en el tiempo a el commit de esta clase:

git reset --hard  974426a

y listo

José Daniel Navarrete Díaz

student•

Se generó al compilar el proyecto debido a que no se instauro la configuración de babel para soportar jsx. Lo solucioné actualizando todo lo relacionado a babel y creando el fichero de configuración de .babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Johnnie Lopez

student•

Consulta los módulos de webpack, los plugins y loaders son dependencias de desarrollo?

Juan Carlos Leandro Diaz Zegarra

student•

Realmente son dependencias que te van a permitir añadir funcionalidades a tu codigo que normalmente sin ellas no tendria

Luis Fernando Nuñez Rangel

student•

Yo las agrego como dependencias de desarrollo ya que estas permiten que el programa funcione en nuestro entorno local, pero una ves mandadas a producción y transpiladas no ocuparemos, ya que lo que obtendremos es una pagina estatica con html, js, y css minificado y básico por que que los plugins, loaders y demas dependencias de webpack son unicamente de desarrollo

Jose Ever Muñoz Muñoz

student•

Para que funcione en react 19 simplemente edite el archivo index.js asi:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
import App from './routes/App';
import reducer from './reducers';

import initialState from './initialState';

const store = createStore(reducer, initialState);

const root = createRoot(document.getElementById('app'));

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

Armando Chindoy

student•

Para los que usan wsl2 y no les muestra nada en localhost:3000, pueden reiniciar wsl con el comando en powershell de windows

wsl --shutdown

o pueden también intentar con una configuración en webpack y buscar la ip de su wsl colocando ipconfig en el cmd o powershell de windows y tomando la ipv4 de wsl y colocándola en su navegador. esto con el fin de que dev-server acepte conexiones externas.

devServer: {
    host: '0.0.0.0',
  },

si no les sale completo la platzi store y solo les sale el navbar y el footer tienen que modificar las rutas en el archivo app.js para que tome las nuevas configuraciones de react-router-dom V6

<Switch> -> <Routes>
component -> element
ej:
<Routes>
<Route exact path="/" element={<Home/>}>
<Routes/>

Jaime Salas

student•

Debiesen ser las nuevas rutas

Dimas Antonio Mendoza Lozano

student•

Si manejan Yarn les dejo este comnando asi actualizan todo a la vez

 yarn upgrade-interactive --latest

Alvaro

student•

la propiedad externals lo que hace es excluir paquetes del bundle final.

Brandon Argel Verdeja Domínguez

student•

Les recomiendo la extensión version lens para vsc, cuando la instalan van al package.json, le dan al icono superior derecho de la V que es de la extensión y les mostrará todas las dependencias que están desactualizadas, o si están en su versión más reciente y desde ahí mismo las pueden actualizar a la más segura (LTS) o a la más reciente. ㅤ

Eric Gomez

student•

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/checkout' element={<Checkout />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
import App from './routes/App';
import reducer from './reducers';

import initialState from './initialState';

const store = createStore(reducer, initialState);

const root = createRoot(document.getElementById('app'));

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

Migración y Optimización de Proyectos con Webpack 5

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción