Upgrade a v2

Per usufruire dei miglioramenti degli strumenti e del framework apportati in PWA Kit v2, è necessario eseguire l'upgrade dei progetti generati prima di questa versione.

Con l'upgrade, le nuove funzionalità di storefront del modello Retail React App non vengono aggiunte automaticamente, ma è possibile aggiungerle in modo manuale utilizzando come riferimento il codice Retail React App più recente.

Sono state aggiunte a PWA Kit v2 numerose funzionalità, tra cui:

🥳 Supporto di TypeScript. Gli strumenti di compilazione ora supportano TypeScript per impostazione predefinita senza necessità di aggiornare i file di configurazione per Babel o Webpack.

🧰 Un server di sviluppo aggiornato che supporta il ricaricamento rapido sul lato server ed è predisposto per il supporto sul lato client in una release futura.

🤓 Uno strumento di riga di comando completamente nuovo denominato pwa-kit-dev che raggruppa gli strumenti di sviluppo consigliati come Webpack, Babel e Jest per supportare i modelli di progetto a configurazione zero.

🖌️ Supporto sperimentale per le app non React per gli utenti interessati a utilizzare Managed Runtime per ospitare altre app basate su Express (oltre a Retail React App).

Se non è ancora stato fatto, consultare la Guida rapida per generare un nuovo progetto PWA Kit utilizzando la versione v2.

La procedura di upgrade da v1.5 a v2 è stata semplificata al massimo, tanto da richiedere la modifica solo di un ridotto numero di file di progetto esistenti.

Se si esegue l'upgrade da v1.4 (o versioni precedenti), la procedura equivale a quella dell'upgrade da v1.5, ma con un passaggio in più. Aggiornare tutte le istruzioni import che prevedono pwa-kit-react-sdk in modo che il percorso di importazione non includa più la cartella dist/.

Continuare la lettura per completare le attività di upgrade rimanenti (per gli utenti di v1.5 e v1.4).

Per iniziare la procedura di upgrade, aprire package.json dalla directory principale del progetto.

Aggiungere e installare tre nuovi pacchetti pwa-kit-*:

Rimuovere le seguenti dipendenze. Queste dipendenze ora vengono gestite dal nuovo strumento pwa-kit-dev. (Se i numeri di versione non corrispondono esattamente a quelli del progetto, rimuoverli comunque.)

Convertire questi script NPM per utilizzare il nuovo pwa-kit-dev:

Aprire babel.config.js dalla directory principale del progetto e sostituire l'intero file con la riga seguente:

Se sono state effettuate personalizzazioni della configurazione Babel, aggiungerle sotto la chiamata alla funzione require().

Eliminare il file webpack.config.js se non è stato personalizzato dalla directory principale del progetto. Viene caricato automaticamente un file di configurazione predefinito.

Se sono state effettuate personalizzazioni, aggiungerle dopo aver richiamato la funzione require() per ottenere la configurazione di base:

Se sono state effettuate personalizzazioni del file ssr.js nella directory app, rinominare il file come ssr.backup.js in modo da preservarle.

Scaricare la nuova versione di ssr.js da GitHub e copiarla nella directory app del progetto. Se non sono state effettuate personalizzazioni, sovrascrivere il file esistente.

Se sono state effettuate personalizzazioni, aprire ssr.js e ssr.backup.js e incorporare quelle di ssr.backup.js in ssr.js.

Utilizzare il seguente blocco di codice come guida per incorporare le personalizzazioni:

Utilizzare sempre la sintassi del modulo CommonJS (require, module.exports) in ssr.js e in qualsiasi file importato da ssr.js.

Ogni volta che getConfig viene utilizzato, importarlo dal nuovo pacchetto pwa-kit-runtime:

Aprire worker/main.js e aggiungere questa nuova route:

In v2 le impostazioni proxy per ogni ambiente Managed Runtime devono essere definite in modo esplicito. La v1 era dotata di un meccanismo di fallback che consentiva a un ambiente Managed Runtime di utilizzare le stesse impostazioni proxy dell'ambiente di sviluppo locale. Il meccanismo di fallback non è supportato per i progetti v2 a causa di problemi di prestazioni e manutenzione.

Per informazioni sulla configurazione delle impostazioni proxy per gli ambienti Managed Runtime con lo strumento Runtime Admin o con Managed Runtime API, vedere Invio delle richieste a un proxy

Per configurare le impostazioni proxy per gli ambienti Managed Runtime è possibile utilizzare anche la nuova funzionalità delle configurazioni specifiche per ambiente in v2.

Prima di v2, PWA Kit supportava Node 12.x. Con v2, assicurarsi che il codice funzioni con Node 14.x.

Per verificare che le modifiche siano state apportate correttamente, eseguire i seguenti comandi:

  1. npm start per verificare che l'app possa essere eseguita in locale.
  2. npm run build per verificare che il processo di compilazione sia corretto.
  3. npm run push (e distribuzione tramite Runtime Admin) per verificare che la distribuzione di un bundle sia corretta.