React (ou Node) 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 incrível que é o WSL.

• Instalando WSL 🖥
• Escolhendo imagem Linux 🐧
• Windows Terminal 💻
• Configurando ambiente no Linux 🛠
• Iniciar novo projeto com o CRA ⚛️
• Algumas coisas a mais 🍉

Instalando WSL 🖥

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

⚠️ O windows precisa estar atualizado.

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

⚠️ Ative o recurso de virtualização na BIOS

Para continuar, você precisa ativar o recurso de virtualização (VT-d) na BIOS do seu dispositivo.
O nome varia bastante, então consulte o guia da marca e modelo do seu dispositivo.

Agora vamos habilitar o recurso de máquina virtual no Windows, basta executar o seguinte comando:

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

⚠️ Em seguida, reinicie o sistema para continuar.

(caso você não reinicie, você não conseguirá instalar o arquivo abaixo).
Após reiniciar o sistema, baixe esse instalador e execute.

E por fim, vamos definir o WSL 2 como padrão 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.

Após escolher, basta baixar e seguir o passo a passo de instalação (que é bem simples)

Windows Terminal 💻

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

Após instalar, vamos configura-lo para abrir a aba da nossa máquina Linux:

Para isso, clique na seta ao lado das abas e vá em "configurações", 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 executável do nosso subsistema Linux.

Para descobrir o nome do executável, podemos iniciar o nosso Linux e em seguida abrir o gerenciador de tarefas, encontrar o processo e clicar com botão direito do mouse sobre ele e escolher a opção "Abrir local do arquivo", em seguida basta copiar o nome do executável 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 começar instalando o Nodejs, para isso podemos utilizar o NVM para facilitar e para gerenciar as versões do Node na nossa máquina.
Vamos começar executando o seguinte comando:

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

Após 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 versões do node disponiveis para nós, rode:

nvm ls-remote

E teremos como resultado a lista de versões que podemos instalar, busque sempre uma versão LTS e mais recente, no meu caso é a 14.16.1.

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

nvm install 14

E para testarmos, basta executarmos:

node -v
# e
npm -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 não está funcionando.
Isso por que o React utiliza o chokidar para monitorar os arquivos que são modificados, e por padrão ele vem com a opção de polling desativado, desta forma não conseguimos notificar essas alterações 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 experiência:

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