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.

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).

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:

In v2 il metodo utilizzato per creare il server Express è stato modificato. Il metodo createApp è stato deprecato e sostituito con un metodo denominato getRuntime.

Il metodo getRuntime restituisce un oggetto di runtime. È possibile utilizzare il metodo createHandler per creare handler Lambda compatibili con Managed Runtime. Il secondo argomento è una funzione di callback che dà accesso all'app Express, consentendone la personalizzazione. Ad esempio, è possibile utilizzare la funzione di callback per implementare endpoint personalizzati.

In v2 la libreria body-parser è rimossa dall'app Express. In caso di endpoint personalizzati che richiedono l'analisi e il popolamento di req.body, installare la libreria body-parser eseguendo npm install body-parser e includere la libreria di parser del corpo in 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 16+.

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.