Actualización a v2

Actualice un proyecto que se generó antes de la v2 de PWA Kit para aprovechar el marco y las mejoras en las herramientas introducidas en la v2.

Hemos agregado muchas características nuevas a PWA Kit v2, que incluyen:

🥳 Soporte TypeScript. Las herramientas de compilación ahora admiten TypeScript por defecto, sin tener que actualizar los archivos de configuración para Babel o Webpack.

🧰 Un servidor de desarrollo actualizado que admite la recarga en caliente en el lado del servidor y permite admitir la recarga en caliente en el lado del cliente en una versión futura.

🤓 Una herramienta de línea de comandos completamente nueva llamada pwa-kit-dev que agrupa nuestras herramientas de desarrollo recomendadas, como Webpack, Babel y Jest, para admitir plantillas de proyectos de configuración cero.

🖌️ Soporte experimental para aplicaciones diferentes a React para aquellos usuarios interesados en usar Managed Runtime para alojar otras aplicaciones basadas en Express (no solo la Retail React App).

Hicimos el proceso de actualización de la v1.5 a la v2 lo más fácil posible: con cambios requeridos solo en un pequeño número de archivos de proyectos existentes.

Si está actualizando desde la v1.4 (o anterior), el proceso es el mismo que para la actualización desde la v1.5, pero con un paso adicional. Actualice todas las declaraciones de import que incluyan pwa-kit-react-sdk para que la ruta de importación deje de incluir a la carpeta dist/.

Siga leyendo para completar las tareas de actualización restantes (para usuarios de v1.5 y v1.4).

Para iniciar el proceso de actualización, abra package.json desde el directorio raíz de su proyecto.

Agregue e instale tres paquetes pwa-kit-* nuevos:

Elimine las siguientes dependencias. La nueva herramienta pwa-kit-dev ahora se hace cargo de estas dependencias por usted. (Si los números de la versión no coinciden exactamente con los que tiene en su proyecto, elimínelos de todas formas).

Convierta estos scripts de NPM para usar la nueva pwa-kit-dev:

Abra babel.config.js desde el directorio raíz de su proyecto y reemplace todo el archivo con esta línea:

Si hizo alguna personalización a su configuración de Babel, agréguela abajo de la llamada para la función require().

Si no personalizó el archivo webpack.config.js desde el directorio raíz de su proyecto, elimínelo. Se cargará automáticamente un archivo de configuración predeterminada para usted.

Si tiene personalizaciones, debe agregarlas después de llamar a la función require() para obtener la configuración base:

Si hizo alguna personalización al archivo ssr.js en el directorio app, cambie el nombre del archivo a ssr.backup.js para poder conservar las personalizaciones.

Descargue la versión nueva de ssr.js desde GitHub y cópiela en el directorio de app de su proyecto. Si no tiene personalizaciones, sobrescriba el archivo existente.

Si tiene personalizaciones, abra tanto ssr.js como ssr.backup.js e incorpore sus personalizaciones ssr.backup.js en ssr.js.

Use el siguiente bloque de códigos como guía para incorporar sus personalizaciones:

Cada vez que se use getConfig, impórtelo del nuevo paquete pwa-kit-runtime:

Abra worker/main.js y agregue esta ruta nueva:

En la v2, se debe definir explícitamente la configuración de proxy para cada entorno de Managed Runtime. En la v1, había un mecanismo de reserva que permitía que un entorno de Managed Runtime usara la misma configuración de proxy que el entorno de desarrollo local. El mecanismo de reserva no es compatible con proyecto de la v2 debido a problemas de rendimiento y mantenimiento.

Para aprender cómo configurar la configuración de proxy para entornos de Managed Runtime con la herramienta Runtime Admin o la Managed Runtime API, consulte Solicitudes de proxy.

También puede aprovechar la nueva característica de configuraciones específicas del entorno en la v2 para establecer la configuración de proxy para sus entornos de Managed Runtime.

Antes de la v2, PWA Kit admitía Node 12.x. Con la v2, debe asegurarse de que su código funcione con Node 14.17+.

Para probar si sus cambios se hicieron con éxito, ejecute los siguientes comandos:

1. npm start para verificar que la aplicación pueda ejecutarse localmente.
2. npm run build para verificar que el proceso de construcción es exitoso.
3. npm run push (e implementar a través de Runtime Admin) para verificar que la implementación de un paquete es exitosa.