Como Configurar o Expo no WSL

pré-requisitos:

Windows 11/10, Direitos de administrador no WSL2, dotenv

O Expo é uma ferramenta open source para facilitar a sua vida na hora de criar aplicativos em React Native. É possível usa-lo em qualquer sistema operacional que você quiser: Windows, Linux e MacOs mas e se eu quiser usa-lo no meu WSL (Windows Subsystem of Linux)? Bem... até a data de criação desse artigo isso seria uma tarefa que beiraria o impossível, mas nós da Devhat nos juntamos para te ajudar nessa missão!

observação

Esse artigo será separado em duas partes: a primeira parte ensinará a configurar e conectar o Expo ao seu celular pelo QR code, a segunda parte ensinará a conectar o Expo a um Virtual Device.

1: ABRIR AS PORTAS DE IP DO SEU COMPUTADOR

• Dentro deste GIST tem um arquivo Powershell, você precisará baixar ou copiar esse arquivo (garanta que é um arquivo .ps1 e não um arquivo .txt) .
  • Caso você precise trocar a porta, edite a variável na 6ª linha, entre parênteses.

$ports = @(8081, 8082);

• Pegue esse arquivo e jogue ele na Root da pasta C C:\.

• Agora abra o PowerShell como administrador (precisa ser como administrador).

• Agora com o seu PowerShell como administrador aberto, você irá fazer algumas coisas:
  • feche todas as abas do WSL abertas no seu computador e execute o seguinte comando.

wsl --shutdown  

• essa mensagem de erro aparecerá caso você pule essa etapa.
• Execute o seguinte comando.

powershell.exe -ExecutionPolicy Bypass -f C:\forward_wsl2_ports.ps1

• se tudo der certo, esse será o resultado no seu terminal.

Se tudo deu certo até aqui significa que você conseguiu configurar o WSL para rodar o Expo! Agora precisamos configurar o Expo para rodar o WSL.

2. CRIANDO E CONFIGURANDO UM PROJETO EXPO

• Abra o seu terminal com WSL e rode o seguinte comando para criar um projeto Expo.

npx create-expo-app

• Após criar o projeto você irá criar um script node chamado get_network_local_ip.js na Root do seu projeto.
• Dentro desse arquivo,
• Nesse script nós usamos duas variáveis de ambiente chamadas: LOCAL_CONNECTION_INTERFACE_NAME e LOCAL_CONNECTION_IPV4_SEARCH.
• Nós precisamos dessas duas envs para poder rodar o projeto no WSL, vamos aprender a achar os valores necessários pras essas envs, para isso vamos rodar o seguinte comando

netsh.exe interface ip show address

• Procure pela Ethernet que tenha o DHCP habilitado como sim, no meu caso é apenas Ethernet, mas no seu caso pode ser Ethernet 1 ou Ethernet 2 ou WiFi, etc.

• Dessas informações nós queremos o Ethernet e o endereço IP pro nosso script e esses serão os valores das nossas envs!
• Agora vamos criar o arquivo de envs e preenche-las para o nosso script
• Na Root do seu projeto crie um arquivo chamado .env.local e coloque as seguintes envs lá:

LOCAL_CONNECTION_INTERFACE_NAME="Ethernet"
LOCAL_CONNECTION_IPV4_SEARCH="Endere"

OBSERVAÇÕES IMPORTANTES!!!!!

• Por que a segunda env LOCAL_CONNECTION_IPV4_SEARCH tem como valor Endere e não Endereço IP?
  • Alguns terminais podem ter um erro de utf-8 e podem não reconhecer a letra ç, nesse caso ele não vai achar o valor correto na hora de executar o script e irá dar erro! Por isso colocaremos apenas Endere na env
• Se a linguagem do seu sistema estiver em inglês, o windows retornará o IP em IP Adress em vez de Endereço IP, caso essa seja a sua situação, troque no .env.local Endere por IP Adress senão, você não conseguirá rodar o projeto.

3. COMANDO PARA RODAR O EXPO NO WSL

• Após essas configurações nós precisaremos apenas criar o comando no package.json para rodar o projeto. Faremos da seguinte forma:
  • Abriremos o arquivo package.json do nosso projeto
  • Colocaremos o seguinte comando na parte de script

    "start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(node get_network_local_ip.js) expo start",

• Ficando dessa forma

• Agora rode o comando que acabamos de criar no terminal com npm run start:wsl
• Se tudo der certo, ele irá mostrar um QR code na tela, baixe o aplicativo Expo GO e escaneie esse QR code e pronto, você tá rodando o Expo pelo WSL!

Caso você goste dessa opção de rodar o seu projeto no seu celular você pode parar por aqui, mas caso você queira rodar o seu projeto no seu computador e o melhor de tudo, SEM PRECISAR DE ANDROID STUDIO PARA ISSO, acesse a parte 2 desse artigo e entenda como.

Caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a devhat. É aqui, que encontramos apoio, compartilhamos ideias e nos inspiramos mutuamente. A comunidade DevHatt não é apenas um conjunto de desenvolvedores, mas uma família unida pela paixão pela tecnologia e inovação.

Se você ainda não faz parte desta comunidade, convidamos você a se juntar a nós no Discord DevHatt.