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!
- Instalando WSL 🖥
- Escolhendo imagem Linux 🐧
- Windows Terminal 💻
- Configurando ambiente no Linux 🛠
- Iniciar novo projeto com o CRA ⚛️
- Algumas coisas a mais 🍉
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
⚠️ 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
⚠️ 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 maquina 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 maquina.
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
Top comments (0)