Mise à jour vers la v2

Mettez à jour un projet généré avant la version 2 de PWA Kit afin de tirer parti des améliorations apportées à la version 2 en matière d’infrastructure et d’outils.

Nous avons ajouté un grand nombre de nouvelles fonctionnalités à PWA Kit v2, notamment :

🥳 La prise en charge de TypeScript. Les outils de build prennent désormais en charge TypeScript par défaut, sans qu’il soit nécessaire de mettre à jour les fichiers de configuration de Babel ou de Webpack.

🧰 Un serveur de développement actualisé qui prend en charge le rechargement à chaud du côté serveur et permettra de prendre en charge le rechargement à chaud du côté client dans une prochaine version.

🤓 Un tout nouvel outil de ligne de commande appelé pwa-kit-dev qui regroupe nos outils de développement recommandés comme Webpack, Babel et Jest pour prendre en charge les modèles de projet zéro-config.

🖌️ La prise en charge expérimentale des applications non React pour les utilisateurs intéressés par l’utilisation de Managed Runtime pour héberger d’autres applications basées sur Express (pas seulement Retail React App).

Nous avons simplifié le processus de mise à jour de la version 1.5 à la version 2, car les modifications requises concernent un petit nombre de fichiers de projet seulement.

Si vous effectuez une mise à jour à partir de la version 1.4 (ou antérieure), le processus est identique à celui de la version 1.5, mais avec une étape supplémentaire. Mettez à jour toutes les instructions import impliquant pwa-kit-react-sdk afin que le chemin d’importation n’inclue plus le dossier dist/.

Lisez la suite pour terminer les tâches restantes de la mise à jour (pour les utilisateurs des v1.5 et v1.4).

Pour lancer le processus de mise à jour, ouvrez package.json à partir du répertoire racine de votre projet.

Ajoutez et installez trois nouveaux paquets pwa-kit-* :

Supprimez les dépendances suivantes. Le nouvel outil pwa-kit-dev s’occupe désormais de ces dépendances pour vous. (Si les numéros de version ne correspondent pas exactement à ceux que vous avez dans votre projet, supprimez-les quand même.)

Convertissez ces scripts NPM pour utiliser le nouveau pwa-kit-dev :

Ouvrez babel.config.js à partir du répertoire racine de votre projet et remplacez l’intégralité du fichier par cette seule ligne :

Si vous avez apporté des personnalisations à votre configuration Babel, ajoutez-les sous l’appel à la fonction require().

Si vous n’avez pas personnalisé le fichier webpack.config.js du répertoire racine de votre projet, supprimez-le. Un fichier de configuration par défaut est chargé automatiquement.

Si vous avez des personnalisations, vous devrez les ajouter après avoir appelé la fonction require() pour obtenir la configuration de base :

Dans la version 2, la méthode utilisée pour créer le serveur Express a été modifiée. La méthode createApp est devenue obsolète ; elle a été remplacée par une méthode appelée getRuntime.

La méthode getRuntime renvoie un objet runtime. Vous pouvez utiliser la méthode createHandler pour créer des gestionnaires lambda compatibles avec Managed Runtime. Le deuxième argument est une fonction de rappel qui vous donne accès à l’application Express pour vous permettre de la personnaliser. Vous pouvez par exemple utiliser la fonction de rappel pour implémenter des points de terminaison personnalisés.

Dans la v2, la bibliothèque body-parser est supprimée de l’application Express. Si vous avez des points de terminaison personnalisés qui nécessitent d’analyser et de compléter req.body, installez la bibliothèque body-parser en exécutant npm install body-parser et incluez la bibliothèque body parser dans ssr.js :

Chaque fois que getConfig est utilisé, importez-le à partir du nouveau paquet pwa-kit-runtime :

Ouvrez worker/main.js et ajoutez cette nouvelle route :

Dans la v2, les paramètres du proxy doivent être définis explicitement pour chaque environnement Managed Runtime. La version 1 disposait d’un mécanisme de secours qui permettait à un environnement Managed Runtime d’utiliser les mêmes paramètres de proxy que l’environnement de développement local. Le mécanisme de secours n’est pas pris en charge pour les projets v2 en raison de problèmes de performance et de maintenance.

Pour savoir comment configurer les paramètres de proxy pour les environnements Managed Runtime à l’aide de l’outil Runtime Admin ou de l’API Managed Runtime, consultez la section Requests via proxy.

Vous pouvez également utiliser la nouvelle fonctionnalité Configurations spécifiques à l’environnement de la v2 pour configurer les paramètres de proxy pour vos environnements Managed Runtime.

Avant la version 2, PWA Kit prenait en charge Node 12.x. Avec la version 2, vous devez vérifier que votre code fonctionne avec Node 16+.

Pour vérifier si vos modifications ont bien été effectuées, exécutez les commandes suivantes :

1. npm start pour vérifier que l’application peut s’exécuter localement.
2. npm run build pour contrôler la réussite du processus de build.
3. npm run push (et déployer via Runtime Admin) pour contrôler la réussite du déploiement d’un bundle.