Como atualizar aplicações em React

Esse post tem o objetivo de documentar os passos que utilizei para atualizar uma aplicação react desenvolvida em meados de 2019, que desde então, não passou por nenhum processo de atualização de bibliotecas.

Alguns passos utilizados aqui podem ser aplicados em vários projetos Node, mas o foco aqui será um pequeno projeto em ReactJS.

Primeiros passos

Utilizei um projeto em React que atualmente está sendo executado em um container docker.

Antes de fazer qualquer alteração, criei uma branch a partir da master para poder trabalhar de forma segura e sem riscos, se tudo der errado, desfaço as alterações e começo novamente 😊.

git checkout -b app_upgraded

Atualizar imagem do Dockerfile

Atualizei a versão da imagem do docker de node:12.2.0-alpine para node:16.15.0-alpine.

Dentro da pasta do meu projeto, apaguei a pasta node_modules e rebuildamos o projeto para criação da nova imagem e subimos o container para inciar a aplicação .

# apaga recursivamnte a pasta node_modules
rm.-rf node_modules

# Apaguei containers e networks existentes para este projeto
docker-compose down 

# Sobe um container a partir da nova imagem construída
docker-compose up --build

Atualizando as bibliotecas com yarn

O ReactJS, assim como as outras bibliotecas dependentes da nossa aplicado , pode ser atualizada utilizando o comando interativo do yarn.

Antes de executar o comando para atualização, foi preciso atualizar a versão do nodejs no dockerfile como mostrei no passo anterior.

Com o container em pé, entrei dentro dele e executei o comando do yarn para atualização.

yarn upgrade-interactive --latest --exact

Será feito uma verificação das dependências da aplicação e retorna uma lista de bibliotecas com a opção para você selecionar todas ou somente aquelas que você gostaria de atualizar.

A lista é composta pelas colunas name, range, from, to e url.

• range: informa o quão longe sua atualização chegará, no meu caso informa que minha atualização chegará não versão mais atual.
• from: Informa a versão atual da biblioteca.
• to: Informa para qual versão você irá após a atualização.
• url: contém a url com a documentação da biblioteca. Para atualização major, recomendo dar uma olhada no link da biblioteca antes de fazer a atualização.

As bibliotecas são categorizada por cores que indicam o grau de complexidade da cada atualização, podendo ser entendido como:

Verde: atualizações patchs, de baixa complexidade, podem ser correções de bugs .

Amarelo: atualizações minor, de média complexidade, requer mais atenção.

Vermelho: atualizações major, de alta complexidade, requer um grande cuidado e muito mais atenção na atualização pois provavelmente você terá que fazer alterações no código fonte para se adequar a nova versão.

✍🏼Dica do Sucesso: Não existem testes automatizados implementados para essa aplicação, isso faz com que atualizações desse tipo sejam muito mais arriscadas.
O ideal seria fazer primeiros os testes automatizados desses componentes, e somente depois atualizar, tornando todo esse processo muito mais tranquilo e seguro.

Como estou trabalhando em outra branch, resolvi marcar para atualizar todas as bibliotecas.

A atualização durou alguns poucos minutos e logo iniciei a aplicação, e então inciaram-se os problemas.

Em breve, tem a parte 2 com as Correções e ajustes após a atualização das bibliotecas