Live Reload - Capacitor

PHOTO EMBED

Thu May 11 2023 13:42:15 GMT+0000 (Coordinated Universal Time)

Saved by @starley #bash

# ⚠️⚠️⚠️ OBSERVAÇÕES IMPORTANTES ⚠️⚠️⚠️

 🚧 **O seu aparelho deve obrigatoriamente estar na mesma rede do seu servidor.**  🚧

⚙️  **Será necessário que o projeto já esteja rodando como um _server_!** ⚙️

 📲  **Depois que seguir os passos abaixo pode fechar o Android Studio, e também não é mais necessário fazer o build novamente, quando fizer qualquer alteração no codigo, criar novas telas etc, ao salvar o arquivo o Live Reload enviará para o dispositivo as alterações!**  📲

-----------------------
#  👾 Usando capacitor com Live Reload  👾

➡️ **1° Vá no 'package.json' e adicione a seguinte linha nos Scripts**

`"startServer": "ng serve --port 8100 --host 0.0.0.0 --disable-host-check",`

⚙️  **Será necessário que o projeto já esteja rodando com esse comando acima para continuar os passos abaixo!** ⚙️

➡️ **2° Encontre seu IP local!**

No windows use '`ipconfig`' para saber o seu IP...
No Linux use '`ifconfig`.

➡️ **3° Depois de saber o seu IP, edite o arquivo 'capacitor.config.json'**

Crie um server se ele não exisir, 

Subistitua a '0.0.0.0' pelo seu IP e defina a porta que o seu projeto está rodando!


```
"server": {
  "url": "http://0.0.0.0:8100",
  "cleartext": true
},
```


➡️ **4° Rode os comandos fazer o build no seu dispositivo, aguarde o Android Studio finalizar a instalação.**

**5° Divirta-se usando o live reload!**** 


-----------------------
#  🤖 Usando Nx.Dev capacitor com Live Reload  🤖

➡️ **1° Você precisa instalar os seguintes plugins...**


```
npm i --save-dev ip
npm i --save-dev cross-env
```


➡️ **2° Depois siga o passo 2 descritos anteriormente no tutorial acima.**

➡️ **3° Vá no 'package.json' e adicione ou edite as seguintes linhas nos Scripts**


```
"LIVE_IN_DEVICE": "cross-env LIVE=true",
"BUILD_DEV": "nx run your_project:build:development && nx run your_project:sync:android && npm run LIVE_IN_DEVICE nx run your_project:copy:android && nx run your_project:open:android",
```


➡️ **4° Depois edite o arquivo 'capacitor.config.ts' ( Aqui o sistema ira pegar o IP automaticamente )**

Adicione o importe do ip

`import ip from 'ip';`

No filnal do arquivo antes do export adicione o seguinte codigo.


```
/** 
 * Use for live reload in real device
 * @author Starley Cazorla
 */
if (process.env.LIVE === 'true') {
    const localIp = ip.address();
    const port = process.env.PORT || '8100';
    config.server = { url: `http://${localIp}:${port}`, cleartext: true };
} else {
    config.server = {
        allowNavigation: ["*"],
        cleartext: true
    };
}
```


**5° Rode os comandos fazer o build no seu dispositivo, aguarde o Android Studio finalizar a instalação.**

**6° Divirta-se usando o live reload!** 


```
 ❓ Duvidas, sugestões
 🪪 Starley Cazorla - Mestre Jedi
 📫 starlleycom@gmail.com
```
content_copyCOPY