React (ou Node) no Windows com WSL
Tags: react, windows, wsl, node
Published: 2021-05-12 00:55:36

![Windows React](https://devblogs.microsoft.com/cse/wp-content/uploads/sites/55/2016/05/featured.png)
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.

> Hey, eu atualizei esta postagem no [meu blog pessoal, veja agora!](https://www.tuliocalil.com.br/post/react-ou-node-no-windows-com-wsl)

 * [ Instalando WSL 🖥](#instalando-wsl-%F0%9F%96%A5)  
 * [ Escolhendo imagem Linux 🐧](#escolhendo-imagem-linux)  
 * [ Windows Terminal 💻](#windows-terminal)  
 * [ Configurando ambiente no Linux 🛠](#configurando-ambiente-no-linux-%F0%9F%9B%A0)  
 * [ Iniciar novo projeto com o CRA ⚛️](#iniciar-novo-projeto-com-o-cra)  
 * [ Algumas coisas a mais 🍉](#algumas-coisas-a-mais) 

###### generated with [Summaryze Forem 🌱](https://summaryze-forem.vercel.app/)

## 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.
```bash
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 maquina virtual no Windows, basta executar o seguinte comando:
```bash
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](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi).

E por fim, vamos definir o WSL 2 como padrão quando baixarmos novas imagens linux:
```bash
wsl --set-default-version 2
```
## Escolhendo imagem Linux 🐧
Temos [algumas imagens linux](https://docs.microsoft.com/pt-br/windows/wsl/install-win10#step-6---install-your-linux-distribution-of-choice) para escolher, vamos até a Windows Store e pesquise por "Linux" e escolha a que você preferir.
![Windows Store](https://docs.microsoft.com/pt-br/windows/wsl/media/store.png)
Após escolher, basta baixar e seguir o passo a passo de instalação (que é bem simples)

## Windows Terminal 💻
![Windows Terminal](https://docs.microsoft.com/pt-br/windows/terminal/images/overview.png)
Vamos agora instalar o [Windows Terminal](https://github.com/microsoft/terminal), é um passo opcional, mas super legal, além de bonito, tem [ótimas funcionalidades](https://docs.microsoft.com/pt-br/windows/terminal/).
Para isso, basta irmos até a Windows Store novamente e pesquisarmos por "Windows Terminal", vamos baixar e instala-lo.
![Windows terminal Windows Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guyt9z3xv7vz0iq0wnr7.png)
Após instalar, vamos configura-lo para abrir a aba da nossa maquina Linux:
![Windows terminal tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3howhh1qbjeii67cvet.png)
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.
![Windows Terminal Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arjfm5cm7db5im3se1w4.png)
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.
![Task manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwkfbsg4cgtsjzkadzir.png)
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](https://github.com/nvm-sh/nvm) para facilitar e para gerenciar as versões do Node na nossa maquina.
Vamos começar executando o seguinte comando:
```bash
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:
```bash
source ~/.bashrc
```
Agora, podemos rodar o comando para listar as versões do node disponiveis para nós, rode:
```bash
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.
![Nvm list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uwtjn0y3nha9ftjvizi.png)
Para instalar a versão mais recente(altere para a sua versão caso seja diferente), execute o comando:
```bash
nvm install 14
```
E para testarmos, basta executarmos:
```bash
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:
```bash
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:
```bash
npm start
```
![Npm start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9tmgtun26cbbsjhqald.png)
Com o projeto rodando, podemos perceber que o hot reloading não está funcionando. 
Isso por que o React utiliza o [chokidar](https://www.npmjs.com/package/chokidar) para monitorar os arquivos que são modificados, e por padrão ele vem com a opção de [polling](https://en.wikipedia.org/wiki/Polling_(computer_science)) 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:
```json

  "scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    ...
  },
```
Com o polling ativado, pare o servidor e rode novamente.
![React Windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf7salgmieye01ou8doa.png)
## Algumas coisas a mais 🍉
Aqui vai algumas dicas bem legais para melhorar ainda mais a experiência:
- Extensão [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) do VSCode.
- Instale o [Yarn](https://yarnpkg.com/getting-started/install).
- [Oh my Zsh](https://tuliocalil.blogspot.com/2019/09/meu-ambiente-linux.html) com temas.
- [Utilize Alias](https://tuliocalil.blogspot.com/2020/07/unix-alias-atalhos-produtivos-no.html)