Como Configurar o Expo no WSL
Tags: expo, reactnative, wsl, javascript
Published: 2024-03-04 20:30:00

## 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](https://discord.gg/3gsMAEumEd) 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`) .
{% gist https://gist.github.com/Alecell/b6243922079e49e08963930bea318096 file=forward_wsl2_ports.ps1 %}
	- Caso  você precise trocar a porta, edite a variável na 6ª linha, entre parênteses.
```bash
$ports = @(8081, 8082);
```
- Pegue esse arquivo e jogue ele na Root da pasta C  `C:\`.

![foto mostrando o script powershell na root da pasta C](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mkhbk3bfc9hf43mf41b.png)
- Agora abra o `PowerShell` como administrador (precisa ser como administrador).

![mostrando como abrir o powershell como adminstrador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obiejwpxsxwv5ysou2rv.png)

- 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.
```bash
wsl --shutdown	
```
- essa mensagem de erro aparecerá caso você pule essa etapa.
![Nenhum objeto MSFT_NetFIrewallRule encontrado com a propriedade 'DisplayName' igual a 'WSL2 Forwarded Prots'. Verifique o valor da propriedae e tente de novo.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pqvi2lnssz4kl79mjmz.png)
- Execute o seguinte comando.
```bash
powershell.exe -ExecutionPolicy Bypass -f C:\forward_wsl2_ports.ps1
```

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

![sucesso executando o script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z8wklpl8xi3r061s7rx.png)

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`.
```bash
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, {% gist https://gist.github.com/Alecell/b6243922079e49e08963930bea318096 file=get_network_local_ip.js %}
- 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 
```bash
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. 

![imagem mostrando os dados que precisamos pro tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8aqkv2ttx2hyul8ed7q.png)

- 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á:
```bash
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` 
```bash
    "start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(node get_network_local_ip.js) expo start",
```

- Ficando dessa forma

![scripts no package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6kcdpr1dqn1gl05zs7g.png)

- 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.](https://dev.to/devhat/como-rodar-um-projeto-expo-por-um-virtual-device-no-wsl-2i16)

Caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a [devhat](https://discord.gg/3gsMAEumEd). É 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](https://discord.gg/3gsMAEumEd).