Atualização para a v2

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

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

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:

Na v2, o método usado para criar o servidor Express foi alterado. O método createApp foi descontinuado e substituído pelo método getRuntime.

O método getRuntime retorna um objeto em tempo de execução. Você pode usar o método createHandler para criar manipuladores Lambda compatíveis com o Managed Runtime. O segundo argumento é uma função de callback que concede acesso ao app Express, permitindo que você personalize o app. Por exemplo, você pode usar a função de callback para implementar endpoints personalizados.

Na v2, a biblioteca body-parser foi removida do app Express. Se você tem endpoints personalizados que requerem req.body analisado e preenchido, instale a biblioteca body-parser executando npm install body-parser e inclua a biblioteca analisadora de corpo a 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 Node 16+.

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.