🌞
🌙

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

Cover Image for Ambiente de desenvolvimento (react e react native) Windows com WSL
Palamar
Palamar
- ... views

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”.

Ubuntu

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.