Atualizar para a v2

Atualize um projeto gerado com o PWA Kit para a v2 e aproveite as melhorias na estrutura e nas ferramentas.

A atualização não adiciona automaticamente à loja virtual recursos do modelo do Retail React App. É preciso adicioná-los manualmente usando o código do Retail React App mais recente como referência.

Adicionamos vários recursos novos ao PWA Kit v2, incluindo:

🥳 Suporte a TypeScript. As ferramentas de build agora aceitam TypeScript por padrão, sem ter que atualizar os arquivos de configuração para Babel ou Webpack.

🧰 Um servidor de desenvolvimento atualizado compatível com o recurso de recarga dinâmica no lado do servidor e que possibilita a compatibilidade com esse mesmo recurso no lado do cliente em uma versão futura.

🤓 Um nova ferramenta de linha de comando chamada pwa-kit-dev que agrupa nossas ferramentas de desenvolvimento recomendadas como Webpack, Babel e Jest para que aceitem modelos de projeto sem nenhum tipo de configuração.

🖌️ Suporte experimental a apps não relacionados ao React para aqueles usuários interessados em usar o Managed Runtime para hospedar outros apps com base em Express (e não somente o Retail React App).

Se você ainda não gerou um projeto do PWA Kit, consulte o guia Início rápido para gerar um novo projeto usando a v2.

Facilitamos ao máximo o processo de atualização da v1.5 para a v2, com mudanças necessárias em apenas alguns arquivos de projeto.

Se você está atualizando da v1.4 ou mais antiga, o processo é o mesmo da atualização da v1.5, com só uma etapa extra. Atualize todas as declarações import que envolvam pwa-kit-react-sdk para que o caminho de importação não inclua mais a pasta dist/.

Continue a leitura para concluir as tarefas de atualização restantes (para usuários da v1.5 e da v1.4).

Para começar o processo de atualização, abra o package.json no diretório raiz de seu projeto.

Adicione e instale três novos pacotes pwa-kit-*:

Remova as dependências a seguir. Agora a nova ferramenta pwa-kit-dev cuida destas dependências para você. Se os números das versões não forem exatamente iguais aos do seu projeto, remova as dependências mesmo assim.

Converta estes scripts do NPM para que usem o novo pwa-kit-dev:

Abra o babel.config.js no diretório raiz de seu projeto e ** substitua o arquivo inteiro** por esta linha:

Caso você tenha feito personalizações à sua configuração do Babel, adicione-as abaixo da chamada à função require().

Se você não personalizou o arquivo webpack.config.js no diretório raiz de seu projeto, exclua-o. Um arquivo-padrão de configuração é carregado automaticamente para você.

Caso você tenha personalizações, é preciso adicioná-las após a chamada à função require() para obter a configuração básica:

Caso você tenha feito personalizações ao arquivo ssr.js no diretório app, renomeie o arquivo como ssr.backup.js para que você possa mantê-las.

Baixe a nova versão do ssr.js pelo GitHub e a copie para o diretório app de seu projeto. Se você não tiver personalizações, substitua o arquivo existente.

Caso você tenha personalizações, abra o ssr.js e o ssr.backup.js e incorpore suas personalizações do ssr.backup.js no ssr.js.

Use o bloco de código a seguir como um guia para incorporar suas personalizações:

Use sempre a sintaxe de módulos CommonJS (require, module.exports) no ssr.js e em todos os arquivos importados pelo ssr.js.

Sempre que ogetConfig for usado, importe-o do novo pacote pwa-kit-runtime:

Abra o worker/main.js e adicione esta nova rota:

Na v2, as configurações de proxy para cada ambiente do Managed Runtime precisam ser explicitamente definidas. Na v1, havia um mecanismo de contingência para que um ambiente do Managed Runtime pudesse usar as mesmas configurações de proxy que o ambiente de desenvolvimento local. O mecanismo de contingência não é compatível com projetos v2 devido a questões de manutenção e desempenho.

Consulte Solicitações de proxy para saber como definir as configurações de proxy nos ambientes do Managed Runtime com a ferramenta Runtime Admin ou a Managed Runtime API.

Você também pode aproveitar as vantagens do novo recurso de configurações específicas do ambiente na v2 para definir as configurações de proxy em seus ambientes do Managed Runtime.

Antes da v2, o PWA Kit era compatível com o Node 12.x. Com a v2, é preciso garantir que seu código funcione com o Node 14.17+.

Para testar se as suas alterações foram bem-sucedidas, execute os seguintes comandos:

  1. npm start para verificar se o aplicativo consegue ser executado localmente.
  2. npm run build para verificar se o processo de build foi bem-sucedido.
  3. npm run push (e faça a implantação via Runtime Admin) para verificar se a implantação do pacote foi bem-sucedida.