Ambiente de desenvolvimento (react e react native) Windows com WSL

Talvez existam outras formas mais simples e mais complexas de atingir o mesmo objetivo, mas esse artigo foi criado para resolver uma situação específica: Trabalhar em ambiente Windows, sem uma máquina virtual do Linux, com acesso à todas as ferramentas necessárias para desenvolvimento Web e Mobile usando as Stacks: Node.js, React.js e React Native. Com esse tutorial você vai conseguir utilizar Windows, Terminal Bash, WSL, NVM, Node.js, Yarn, Docker, Android Studio, Reactotron e acredito que qualquer outra necessidade básica de um Desenvolvedor.

Esse tutorial está dividido nas seguintes etapas:#

  1. Instalar Powerline Fonts no Windows
  2. Instalando WSL + Oh-My-Zsh no Windows 10
  3. Configurações do Terminal, ZSH e Plugins
  4. Instalando Node.js usando o NVM;
  5. Instalando o Docker Windows e acessando pelo WSL
  6. Instalando Addons necessários do VSCode para usar com WSL
  7. Instalando o Android Studio e Android Emulator — utlizando com o WSL

Não recomendo que pule as etapa pois tem alguma configuração que pode ser relevante mais adiante que não vou repetir.


INSTALANDO POWERLINE FONTS NO WINDOWS#

  1. Faça download das Powerline Fonts na página do Github, salvando na pasta Downloads.

  2. Extraia o arquivo fonts-master.zip sem alterar a pasta padrão (vai facilitar nos próximos passos).

  3. Execute o PowerShell no modo Administrador e digite o seguinte comando: cd ${HOME}\Downloads\fonts-master\fonts-master para entrar na pasta onde você extraiu os arquivos (Ajuste a pasta se necessário).

  4. Você vai precisar dar permissão para executar o instalador, então digite: Set-ExecutionPolicy Bypass e digite S para “Sim” quando solicitado.

  5. Agora basta executar o instalador digitando: .\install.ps1 e aguardar a instalação de todas as suas fontes.

Por fim, você pode voltar as definições de segurança para o Default se quiser digitando Set-ExecutionPolicy Default e aplicando Y para “Yes” quando necessário.


INSTALANDO O WSL + Oh-My-Zsh no Windows 10#

Primeiras Instalações (WSL + Ubuntu + Windows Terminal Preview)#

A primeira coisa é ativar o WSL (Windows Sub-system for Linux). Para tanto, basta abrir o PowerShell como Administrador e executar o seguinte comando:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Não se esqueça de confirmar quando solicitado, feito a ativação do WSL será necessario reiniciar o windows.

Caso o WSL jáesteja ativado em seu sistema, não será necessario executar o comando acima.

Após reiniciar o Windows é hora de instalar suas ferramentas diretamente da “Microsoft Store”. Primeiramente vamos instalar o Ubuntu 20.04 LTS diretamente da “Microsoft Store” clicando em “Instalar”.

Após a instalação, basta clicar em “Iniciar” e vamos fazer a configuração inicial do Ubuntu 20.04 LTS.

Assim que o WSL fizer sua própria instalação, você vai precisar digitar seu username e password e, ao final, você deve ver uma tela parecida com essa:

Ubuntu Terminal

Agora pode fechar e vamos instalar nosso novo Terminal. Para tanto, volte para a Windows Store e procure por “Windows Terminal”, ‘instale e execute.

Como default o Windows Terminal vai abrir o PowerShell, mas você pode escolher outro terminal e inclusive, substituir o default. Para prosseguir, basta clicar no menu dropdown e Configurações (ou o atalho: Ctrl + ,):

Windows Terminal

As configurações do Windows Terminal Preview estão contidas no profiles.json e basta alterarmos esse arquivo que ao salvar as novas configurações são aplicadas.

Configurando o Terminal#

Nas configurações são duas as principais configurações: “profiles” e “schemes”.

O profile contém seus terminais que são as configurações dentro das chaves, como no exemplo abaixo, em que cada conjunto de configurações dentro das chaves é um terminal, sendo que apenas o último não vai possuir a vírgula no final:

{
"$schema": "https://aka.ms/terminal-profiles-schema",
"defaultProfile": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
"copyOnSelect": false,
"copyFormatting": false,
"profiles":
{
"defaults":
{
},
"list":
[
{
// Ubuntu 20.04 LTS - Tema Dracula
"guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
"hidden": false,
"colorScheme": "Dracula",
"name": "Ubuntu-20.04",
//"source": "Windows.Terminal.Wsl",
"commandline" : "wsl.exe -d Ubuntu-20.04",
"acrylicOpacity": 0.5,
"background" : "#282A36",
"closeOnExit" : true,
"cursorColor" : "#FFFFFF",
"cursorShape" : "bar",
"fontFace" : "Hack",
"fontSize" : 12,
"historySize" : 9001,
"icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png",
"padding" : "0, 0, 0, 0",
"snapOnInput" : true,
"startingDirectory" : "%USERPROFILE%",
"useAcrylic" : false
},
{
"guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
"name": "Windows PowerShell",
"commandline": "powershell.exe",
"hidden": false
},
{
"guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
"name": "Command Prompt",
"commandline": "cmd.exe",
"hidden": false
},
{
"guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
"hidden": false,
"name": "Azure Cloud Shell",
"source": "Windows.Terminal.Azure"
},
{
"guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
"hidden": false,
"name": "Ubuntu-20.04",
"source": "Windows.Terminal.Wsl"
}
]
},
"schemes": [
{
"background" : "#282A36",
"black" : "#21222C",
"blue" : "#BD93F9",
"brightBlack" : "#6272A4",
"brightBlue" : "#D6ACFF",
"brightCyan" : "#A4FFFF",
"brightGreen" : "#69FF94",
"brightPurple" : "#FF92DF",
"brightRed" : "#FF6E6E",
"brightWhite" : "#FFFFFF",
"brightYellow" : "#FFFFA5",
"cyan" : "#8BE9FD",
"foreground" : "#F8F8F2",
"green" : "#50FA7B",
"name" : "Dracula",
"purple" : "#FF79C6",
"red" : "#FF5555",
"white" : "#F8F8F2",
"yellow" : "#F1FA8C"
}
],
"actions":
[
{ "command": {"action": "copy", "singleLine": false }, "keys": "ctrl+c" },
{ "command": "paste", "keys": "ctrl+v" },
{ "command": "find", "keys": "ctrl+shift+f" },
{ "command": { "action": "splitPane", "split": "auto", "splitMode": "duplicate" }, "keys": "alt+shift+d" }
]
}

Aqui vamos inserir um novo terminal já pré-configurado, basta copiar e colar e inserir como seu último terminal, lembrando de ajustas as vírgulas onde necessário:

{
// Ubuntu 20.04 LTS - Tema Dracula
"guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
"hidden": false,
"colorScheme": "Dracula",
"name": "Ubuntu-20.04",
//"source": "Windows.Terminal.Wsl",
"commandline" : "wsl.exe -d Ubuntu-20.04",
"acrylicOpacity": 0.5,
"background" : "#282A36",
"closeOnExit" : true,
"cursorColor" : "#FFFFFF",
"cursorShape" : "bar",
"fontFace" : "Fira Code Retina",
"fontSize" : 12,
"historySize" : 9001,
"icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png",
"padding" : "0, 0, 0, 0",
"snapOnInput" : true,
"startingDirectory" : "%USERPROFILE%",
"useAcrylic" : false
},

Observe que criamos um terminal de nome “Ubuntu Dracula” que usa o “colorScheme”: “Dracula”. Agora basta inserir o colorScheme do Dracula na seção “schemes”, da seguinte forma:

{
// Ubuntu 20.04 LTS - Tema Dracula
"guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
"hidden": false,
"colorScheme": "Dracula",
"name": "Ubuntu-20.04",
//"source": "Windows.Terminal.Wsl",
"commandline" : "wsl.exe -d Ubuntu-20.04",
"acrylicOpacity": 0.5,
"background" : "#282A36",
"closeOnExit" : true,
"cursorColor" : "#FFFFFF",
"cursorShape" : "bar",
"fontFace" : "Fira Code Retina",
"fontSize" : 12,
"historySize" : 9001,
"icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png",
"padding" : "0, 0, 0, 0",
"snapOnInput" : true,
"startingDirectory" : "%USERPROFILE%",
"useAcrylic" : false
},

Finalizado isso, você pode deixar o Ubuntu que acabamos de configurar como seu terminal padrão, para isso basta substituir o seu “defaultProfile” (vai estar nas primeiras linhas) pelo seguinte:

"defaultProfile": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",

Liberando permissões para o WSL#

Antes de prosseguir nós precisamos liberar permissões para o WSL no Windows. Para isso precisamos fazer o seguinte caminho no Windows: Iniciar > Configurações > Atualização e Segurança > Segurança do Windows > Proteção contra vírus e ameaças.

ATENÇÃO — IMPORTANTE!! Essa exclusão é necessária senão o sistema não vai funcionar.

Você deve clicar em “Gerenciar configurações” e procure “Exclusões”, clicando em “Adicionar ou remover exclusões. Em seguida adicione a pasta C:\Users\User\AppData\Local\Packages\CanonicalGroup…, resultando nisso:

Instalando o ZSH#

Feitas essas configurações, vamos instalar o ZSH que vamos utilizar no lugar do Bash. Para tanto, basta abrir o WSL pelo seu Terminal e executar os seguintes comandos:

sudo apt update
sudo apt upgrade
sudo apt install zsh

Montando automaticamente as unidades do Windows#

Concluída a instalação do ZSH, vamos configurar para que o WSL monte suas unidades Windows, substituindo o caminho padrão de /mnt/{drive} para montar diretamente em seu Home. A primeira coisa é editar o /etc/passwd digitando o seguinte comando:

sudo nano /etc/passwd

Aqui você vai procurar uma linha que inicia com seu username e fazer as seguintes alterações, substitua a onde esta bash por zsh.

Para salvar você deve apertar (Ctrl + O) e em seguida (Ctrl + X) para fechar o arquivo.

Em seguida precisamos criar um novo arquivo (/etc/wsl.conf) e adicionar algumas configurações, bastando abrir pelo editor nano novamente:

sudo nano /etc/wsl.conf

Adicione o seguinte conteúdo e em seguida basta salvar e sair:

[automount]
enabled = true
root = /
options = "metadata,umask=22,fmask=11"

Basta fechar o seu terminal e para garantir que todas as configurações sejam aplicadas, execute o seguinte comando no Windows PowerShell:

wsl.exe --terminate Ubuntu-20.04

Instalando o ZSH e Oh-My-Zsh#

Até agora estivemos fazendo as configurações, seja do Windows, seja do Linux. A partir de agora vamos partir para as personalizações do WSL.

Então abra novamente o seu WSL pelo Terminal e você deve ver uma tela como essa:

Por enquanto ignore o aviso inicial, só selecione a opção “q” e vamos instalar o Oh- My-Zsh utilizando o comando abaixo:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Instalando o Tema Spaceship no ZSH e o ZPlugin#

Para finalizar, vamos realizar algumas alterações estéticas e instalar o Tema Spaceship com algumas configurações.

Vamos digitar alguns comandos (um por vez) e no final vamos abrir o arquivo de configurações do ZSH:

git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"
ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"
sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zplugin/master/doc/install.sh)"
sudo nano ~/.zshrc

Agora vamos dar uma personalizada no tema, além de configurar o ZPlugin que acabamos de instalar. Tudo isso será feita no arquivo que acabamos de abrir com o editor nano:

  1. Alterar o ZSH_THEME para spaceship assim: ZSH_THEME="spaceship"

  2. Incluir as seguintes configurações do Spaceship no final do arquivo:

SPACESHIP_PROMPT_ORDER=(
user # Username section
dir # Current directory section
host # Hostname section
git # Git section (git_branch + git_status)
hg # Mercurial section (hg_branch + hg_status)
exec_time # Execution time
line_sep # Line break
vi_mode # Vi-mode indicator
jobs # Background jobs indicator
exit_code # Exit code section
char # Prompt character
)
SPACESHIP_USER_SHOW=always
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL="❯"
SPACESHIP_CHAR_SUFFIX=" "
  1. Incluir as configurações do ZPlugin logo após as do item anterior:
zplugin light zdharma/fast-syntax-highlighting
zplugin light zsh-users/zsh-autosuggestions
zplugin light zsh-users/zsh-completions

O ZPlugin vai adicionar algumas funcionalidades bem interessantes como sugestão de comando, auto completar e syntax-highlighting que vão te ajudar na produtividade com o terminal, inclusive mantendo um histórico dos comandos que você já executou.

Tudo pronto. Só fechar e abrir um novo Terminal do WSL e o ZPlugin vai ser instalado automaticamente. Ao final você vai ter uma tela parecida com essa:

Agora vamos configurar o ambiente de desenvolvimento!

INSTALANDO O NODE.JS#

Vamos configurar o Node.js utilizando o NVM. Se você souber configurar isso por conta própria, basta ir para a próxima seção. Mas se tiver alguma dúvida, ou para garantir que nada de saia fora do planejado, vamos seguir.

A instalação do Node.js é bem simples usando o NVM, bastando você seguir a documentação oficial. Mas se quiser um resumo, basta fazer o seguinte:

  1. Digitar o comando abaixo para instalar o NVM:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
  1. Abrir o .zshrc (sudo nano ~/.zshrc) e verificar se o NVM incluiu o seguinte no final do arquivo:
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
  1. Agora basta reabrir o Terminal e conferir se o NVM está instalado. Digite: nvm --version

  2. Instalar o Node.js digitando: nvm install v12.13.

Pronto! Agora temos o Node.js instalado usando a versão LTS de quando escrevi esse artigo. Se quiser conferir qual a versão LTS atual, basta conferir no site do Node.js.

INSTALANDO O DOCKER#

Agora que já temos nosso WSL, nosso terminal rodando, nossas estilizações e plugins, além do Node.js, já podemos utilizar nosso ambiente de desenvolvimento para aplicações Web ou backend. Mas se formos usar algum banco de dados, vai ficar muito mais fácil utilizar o Docker para rodar containers com esses banco de dados, ou até rodar uma container Node.js se for o caso.

Configurando o Docker Desktop (Windows)

Nós vamos utilizar o Docker Desktop Community Edition (que é aquele instalado no Windows), apesar de que vamos executá-lo por meio do WSL. Por enquanto, basta instalar a versão Windows do Docker (usando containers Linux — opção de instalação).

Depois de instalado, abra as Settings e não esqueça de selecionar “Expose daemon on tcp://localhost:2375 without TLS”, conforme imagem abaixo:

É uma boa prática também ir na opção “Shared Drives” e selecionar os seus “Local Drives” para que estejam disponíveis para o Docker.

Antes de prosseguir, abra um terminal PowerShell e digite docker info para ter certeza que o Docker está funcionando.

Pronto! Temos o Docker rodando no Windows.

Instalando o Docker no WSL#

Agora vamos precisar fazer com que o WSL se comunique com o Docker instalado no Windows, então vamos começar fazendo todo o passo a passo que podemos encontrar na própria Documentação do Docker para instalação no Ubuntu 20.04:

sudo apt update -y
sudo apt-get install -y \
apt-transport-https \
ca-certificates \
curl \
software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add
sudo apt-key fingerprint 0EBFCD88
sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable"
sudo apt update -y
sudo apt install -y docker-ce
sudo usermod -aG docker $USER

Pronto! Agora basta fechar seu terminal e abrir novamente e você deve conseguir usar o docker. Quer testar, basta digitar um docker --version no WSL e você vai ver algo como isso:

Instalando o Docker Compose no WSL#

Agora vamos instalar o Docker Compose utilizando o Python para ficar mais simples:

# Instalar Python e PIP.
sudo apt install -y python3 python3-pip# Instalar Docker Compose no seu diretório Home.
pip3 install --user docker-compose

Configurar WSL para conectar no Docker for Windows#

Por fim precisamos conectar à Docker daemon remota, que por padrão utiliza a porta 2375. Uma vez que estamos utilizando o ZSH, vamos digitar o seguinte comando:

echo "export PATH="$PATH:$HOME/.local/bin" >> ~/.zshrc && source ~/.zshrc
echo "export DOCKER_HOST=tcp://localhost:2375" >> ~/.zshrc && source ~/.zshrc

Pronto, se quiser testar você pode digitar os seguintes comandos que devem funcionar:

docker info
docker-compose --version

No meu caso ficou assim, mas se não der certo feche e abra o terminal e tente novamente:

Configurando os Addons do VSCode#

Remote — Containers
Remote — SSH
Remote — SSH: Editing Configuration Files
Remote — WSL
Remote Development

Agora quando você instalar extensões como ESLint, Live Server, Prettier, o VS Code vai instalar remotamente no WSL para que você possa utilizar suas funcionalidades, ficando com algo como isso:

Instalando a extenção no VScode

Quer rodar esse projeto para testar? Basta fazer o seguinte:

yarn global json-server install
yarn install
json-server server.json -p 3333
yarn start

O projeto está rodando no seu http://localhost:3000 utilizando o json-server para fornecer os dados simulando uma API/REST.