Skip to main content

Atualização Front-End

· 2 min read
Matheus Rubio
Matheus Rubio
Tech Lead

Nos próximos dias irá subir uma atualização pra develop (PR já está aberta) com uma grande atualização no nosso front-end.

Nessa atualização, foi alterada a ferramenta que utilizamos para realizar o build e o inicio local do front-end. Nós utilizavamos o create-react-app, que é uma ferramente disponibilizada pelo próprio react, mas que de acordo com a própria documentação do react não é o recomendado.

A partir de agora, utilizamos o vite, na versão 4 (a versão LTS não funciona no node 16). Com essa alteração, teremos que ter cuidado com algumas pequenasa alterações que o vite exige para o seu funcionamento.

DECLARAÇÃO DE .ENV​

Antes utilizávamos o prefixo REACT_APP_ para declarar alguma variável de ambiente no nosso .env, mas a partir de agora iremos utilziar o prefixo VITE_ no lugar.

Para utilizar essas variáveis de ambiente como padrão do node utilizávamos o process.env, mas a partir de agora o vite só enxerga as variáveis de ambiente utilizando o import.meta.env

IMPORTAÇÃO DE SVG'S COMO COMPONENTES​

O vite utiliza um plugin pra conseguirmos importar os .svg como componente, mas pra continuaar funcional devemos mudar a forma de importar:

  • Antes
/nx-suite-front-novo/.env
import { ReactComponent as CalendarIcon } from '../../assets/icons/calendarIcon.svg';
  • Depois
/nx-suite-front-novo/.env
 import CalendarIcon from '../../assets/icons/calendarIcon.svg?react';
danger

IMPORTANTE​

Assim que a PR for aprovada e mergeada na develop e vocês forem iniciar a utilização do novo build, deverão seguir esses passos abaixo:

  • Deletar a pasta 📁 node_modules presente na pasta raiz do projeto

  • Instalar as dependências atualizadas com o comando:

/nx-suite-front-novo
 yarn install
  • Copiar as variáveis de ambiente atualizadas disponíveis no .env.example, selecionar o ambiente que deseja rodar o front e deixar somente descomentado as variáveis do respectivo ambiente.

Caso queira trocar de ambiente, agora não precisará parar a execução do front para fazer isso, basta atualizar o .env e salvar, automaticament o vite irá reiniciar com as novas variáveis carregadas.

Rodar o front com o comando abaixo e ser feliz 😃

/nx-suite-front-novo
 yarn start

Caso queira entender melhor sobre o vite e dar uma lida na documentação, o link está abaixo, vale ressaltar que esse link é da v4, a atual do vite é a v5 que ainda não utilizamos.

Qualquer outra dúvida, podem me procurar ❤️

https://v4.vitejs.dev/guide/