DEV Community

Tulio Calil
Tulio Calil

Posted on • Edited on • Originally published at tuliocalil.com.br

React (ou Node) no Windows com WSL

#react #windows #wsl #node

Windows React
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!

generated with Summaryze Forem 🌱

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
Enter fullscreen mode Exit fullscreen mode

⚠️ 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:

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
Enter fullscreen mode Exit fullscreen mode

⚠️ 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
Enter fullscreen mode Exit fullscreen mode

Escolhendo imagem Linux 🐧

Temos algumas imagens linux para escolher, vamos até a Windows Store e pesquise por "Linux" e escolha a que você preferir.
Windows Store
Após escolher, basta baixar e seguir o passo a passo de instalação (que é bem simples)

Windows Terminal 💻

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.
Windows terminal Windows Store
Após instalar, vamos configura-lo para abrir a aba da nossa maquina Linux:
Windows terminal tabs
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
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
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 maquina.
Vamos começar executando o seguinte comando:

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

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

source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

Agora, podemos rodar o comando para listar as versões do node disponiveis para nós, rode:

nvm ls-remote
Enter fullscreen mode Exit fullscreen mode

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
Para instalar a versão mais recente(altere para a sua versão caso seja diferente), execute o comando:

nvm install 14
Enter fullscreen mode Exit fullscreen mode

E para testarmos, basta executarmos:

node -v
# e
npm -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
    ...
  },
Enter fullscreen mode Exit fullscreen mode

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

Algumas coisas a mais 🍉

Aqui vai algumas dicas bem legais para melhorar ainda mais a experiência:

Top comments (0)

Read next

paharihacker profile image

The Art of Lazy Loading: Speeding Up JavaScript Applications

Rajesh Dhiman -

robinokwanma profile image

Build a Weather App with React Native, OpenCageData, and OpenWeatherMap

robin okwanma -

lymestack profile image

SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity

Michael Joseph -

leemeganj profile image

npm vs. npx: What’s the difference?

Megan Lee -