Como montar um ambiente de desenvolvimento React-Native no Windows (WSL)

Bruno Lessa
Mova Tecnologia
Published in
3 min readDec 17, 2018
Photo by rawpixel on Unsplash

React sempre me chamou a atenção, mas ainda não tinha tido a chance (**tempo ) de fazer um “hands-on” nesta tecnologia. Então, chegou a hora: resolvi partir pra instalar, configurar e ver como é que tudo se comporta. E fui direto para brncar com o React-Native,

Meu notebook é Windows, e já tinha passado por problemas com npm, pip, etc. Então já tinha decidido que era preciso codificar no Linux, até para não ter algum problema aleatório na hora de um deploy em nossos servers Linux.

Mas, por bem ou por mal, descobri o WSL (Windows Subsystem for Linux), que pra quem não conhece, coloca um Linux dentro do Windows. É isso mesmo, passei a ter um Ubuntu no meu note! Sem dual-boot , VM ou qualquer coisa do genero. Claro que não existe almoço grátis, e tem lá suas limitações e falta de algumas coisas, digamos, mais root´s. Mas vamos lá:

Primeiro passo é habilitar o WSL no Windows:

Painel de Controle\Todos os Itens do Painel de Controle\Programas e Recursos

WSL ativado (Subsistema do Windows para Linux)

Depois é só ir na Windows Store e instalar o Linux desejado. Eu peguei o Ubuntu, porque temos servers Ubuntu:

Opções de download na Windows Store

Agora já tenho o Ubuntu rodando dentro do Windows:

Terminal (Hyper) conectado no meu Ubuntu local

Interessante que os drives Windows, ficam acessíveis via Linux, através do path: /mnt/[drive]

Agora está tudo uma beleza: é só instalar, node, npm, react-native, que já posso começar a brincar. Assim foi feito, só que eu queria codificar no VSCode. Mas não deu muito certo editar os arquivos direto no diretório do filesystem do Linux (%LOCALAPPDATA%\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs), meu app não recarregava quando salvava alguma alteração, o Linux não reconhecia modificação no arquivo, e além disso, não é recomendado modificar arquivos do file system Linux pelo Windows.

Então, resolvi “criar” meu app no path: /mnt/c/linux (C:\linux), mas não teve jeito de fazer funcionar (criar o app react), era erro de tudo que é jeito. Então voltei para criar o app no /home/lessa/ e copiei o folder já criado, para /mnt/c/linux/my-app. Agora eu tinha meu app react-native acessível no VSCode e tudo funcionou perfeitamente.

Depois disso, cismei que tinha que conectar o adb (Android Debub Bridge) ao meu device e que tinha que funcionar no Linux. O pulo do gato é instalar a mesma versão tanto no Windows como no Linux.

Linux: apt-get install android-tools-* , veio a versão 1.0.36

aparelho conectado no Linux

Windows: https://drive.google.com/drive/folders/0B_zpfBV0pV7wZWlFaTNaaEtHZTQ Neste folder tem a versão 1.0.36 .

aparelho conectado no Windows

Agora é hora de brincar com react-native. Em resumo:

  • programando no VSCode
  • usando todo o enviroment Linux
  • e com o celular conectado ao note via ADB.

Próximo post será sobre react-native em pessoa ! :)

HappyCoding !

--

--