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 predeterminado, 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:

En la v2 se cambió el método utilizado para crear el servidor Express. El método createApp ha quedado obsoleto y se reemplazó por un método llamado getRuntime.

El método getRuntime devuelve un objeto de Runtime. Puede utilizar el método createHandler para crear controladores lambda que sean compatibles con Managed Runtime. El segundo argumento es una función de devolución de llamadas que le brinda acceso a la aplicación Express, lo que le permite personalizar la aplicación Express. Por ejemplo, puede utilizar la función de devolución de llamadas para implementar puntos de conexión personalizados.

En la v2 se elimina la biblioteca body-parser de la aplicación Express. Si tiene puntos de conexión personalizados que requieren req.body analizados y completados, instale la biblioteca body-parser ejecutando npm install body-parser e incluya la biblioteca del analizador de conjuntos en ssr.js:

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 16+.

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.