React no Windows com WSL

Se voc tem Windows e usa React (ou qualquer outra lib/framework que dependa do Nodejs) e j teve algum problema com o ambiente Node.js no Windows ou mesmo tem a curiosidade de utilizar o WSL (Windows subsystem for linux), esse post vai te ajudar a configurar essa ferramenta incrvel que o WSL.

Instalando WSL

Vamos comear habilitando o WSL no nosso Windows, para isso vamos executar o seguinte comando no PowerShell (execute como administrador):

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Agora vamos habilitar o recurso de maquina virtual no Windows, basta executar o seguinte comando:

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Em seguida, reinicie o sistema para continuar.
Aps reiniciar o sistema, baixe esse instalador e execute.

E por fim, vamos definir o WSL 2 como padro quando baixarmos novas imagens linux:

wsl --set-default-version 2

Escolhendo imagem Linux

Temos algumas imagens linux para escolher, vamos at a Windows Store e pesquise por "Linux" e escolha a que voc preferir.

Aps escolher, basta baixar e seguir o passo a passo de instalao (que bem simples)

Windows Terminal

Vamos agora instalar o Windows Terminal, um passo opcional, mas super legal, alm de bonito, tem timas funcionalidades.
Para isso, basta irmos at a Windows Store novamente e pesquisarmos por "Windows Terminal", vamos baixar e instala-lo.

Aps instalar, vamos configura-lo para abrir a aba da nossa maquina Linux:

Para isso, clique na seta ao lado das abas e v em "configuraes", vamos at a categoria "Perfis" e clique em "Adicionar novo". Na tela que ir se abrir, vamos preencher o campo "Linha de comando" com o nome do executvel do nosso subsistema Linux.

Para descobrir o nome do executvel, podemos iniciar o nosso Linux e em seguida abrir o gerenciador de tarefas, encontrar o processo e clicar com boto direito do mouse sobre ele e escolher a opo "Abrir local do arquivo", em seguida basta copiar o nome do executvel e colar no campo anterior.

O Windows terminal ir identificar automaticamente o nome e cone do sistema, bastando apenas clicar em "Salvar" agora.

Configurando ambiente no Linux

Agora vamos para o nosso sistema Linux, apara isso, execute o Windows Terminal e abra uma nova aba com o seu Linux.
Vamos comear instalando o Nodejs, para isso podemos utilizar o NVM para facilitar e para gerenciar as verses do Node na nossa maquina.
Vamos comear executando o seguinte comando:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Aps baixar, precisamos recarregar nosso arquivo bashrc para que o comando "nvm" seja reconhecido, para isso, execute:

source ~/.bashrc

Agora, podemos rodar o comando para listar as verses do node disponiveis para ns, rode:

nvm ls-remote

E teremos como resultado a lista de verses que podemos instalar, busque sempre uma verso LTS e mais recente, no meu caso a 14.16.1.

Para instalar a verso mais recente(altere para a sua verso caso seja diferente), execute o comando:

nvm install 14

E para testarmos, basta executarmos:

node -v# enpm -v

Iniciar novo projeto com o CRA

Dentro do nosso Linux, vamos criar um novo projeto React, vamos navegar at a pasta que desejar, no meu caso Documents e executar o comando:

npx create-react-app meuAppTest

Caso voc j tenha o Visual Studio Code instalado, basta digitar code . dentro da pasta do projeto e o VSCode ir abrir com o projeto j carregado.
Agora, vamos rodar o projeto:

npm start

Com o projeto rodando, podemos perceber que o hot reloading no est funcionando.
Isso por que o React utiliza o chokidar para monitorar os arquivos que so modificados, e por padro ele vem com a opo de polling desativado, desta forma no conseguimos notificar essas alteraes entre o Windows e o nosso subsistema.
Para resolver, vamos no nosso package.json e na parte dos scripts vamos substituir o script de start para o seguinte:

  "scripts": {    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",    ...  },

Com o polling ativado, pare o servidor e rode novamente.

Algumas coisas a mais

Aqui vai algumas dicas bem legais para melhorar ainda mais a experincia:

• Extenso Remote - WSL do VSCode.
• Instale o Yarn.
• Oh my Zsh com temas.
• Utilize Alias