# Live Dev - see every save on your phone > A dev app that loads your PC's dev server over Wi-Fi or USB as http://localhost, so every save shows on the phone - with a console and refresh-on-save built in. - **Applies to:** AppMint - **Source:** the Integration Guide shipped inside the app; this page is generated from it. - **HTML:** https://freewebtoapk.com/docs/live-dev-mode A dev app that loads your PC's dev server over Wi-Fi or USB, with a console on the phone ### 1. What Live Dev is Live Dev builds a DEV APP for your own phone. Instead of packing your files inside the APK, the app loads them from the dev server running on your PC - so every time you save a file, the change shows up on the phone. No rebuild, no reinstall, no copying ZIPs. It is the real AppMint shell, not a browser tab: camera, location, notifications, ads, the back button, the side menu and every AppMint bridge behave exactly as they will in your finished app. You build it once. After that you only come back to AppMint when you change something native - a permission, the icon, the splash, the ad IDs. ### 2. Build the dev app (once) 1. On the home screen tap 'Live Dev' (or Create APK → the 'Live Dev' tile). 2. Pick your dev server's port. One tap for the common tools: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Any port from 1024 up works. 3. Optional: a start page such as /admin/index.html, and your PC's address. Leave the address empty - the app finds your PC by itself. 4. Give it a package name ending in .dev (for example com.myshop.dev) so it can sit next to your real app later. 5. In the Access step tick the permissions you want to test (camera, location, notifications…). These are native, so they are fixed when you build. 6. Build and install the APK on your phone. A Live Dev build never produces a Play bundle (AAB): it only works next to your PC, so it must never be published. ### 3. Start your dev server so the phone can reach it By default most dev servers only listen to the PC itself. Add the 'host' switch so other devices on your Wi-Fi can connect: - Vite (React, Vue, Svelte, Astro): npm run dev -- --host - Next.js: npx next dev -H 0.0.0.0 - Angular: ng serve --host 0.0.0.0 - Create React App / Vue CLI: already listen on the network Only have a folder of HTML files? Any of these turns it into a server - run it inside the folder: - npx serve -l 5500 - python -m http.server 8000 - VS Code: install 'Live Server', then click 'Go Live' Windows asks once whether to allow the server through the firewall - tick 'Private networks' and allow it. If you clicked Cancel, the phone cannot connect until you allow Node (or Python) in Windows Security → Firewall → Allow an app. ``` npm run dev -- --host ``` ### 4. Connect over Wi-Fi - no cable, nothing to install 1. Put the phone on the same Wi-Fi as the PC. 2. Open your Live Dev app. That is all. The app looks for your dev server on the port you chose, finds your PC, and loads the page. It remembers the PC for next time. If your server is on a different port, or several PCs answer, it shows them and you tap yours. Nothing found? The connect screen keeps trying every two seconds and opens the page by itself the moment your server is reachable - start the server and watch. 'Find my PC' also checks the other common ports. You can always type the address Vite prints under 'Network:' into 'Enter it yourself'. Why this is better than typing http://192.168.1.5:5173 into a website app: the page still runs as http://localhost:PORT on the phone (the app tunnels it to your PC). localhost is a SECURE CONTEXT, so camera, microphone, location, clipboard, service workers and passkeys work. On a plain 192.168… address the browser engine blocks all of them. ### 5. Connect over USB - works with no Wi-Fi at all Use this when the PC and phone are on different networks, on a guest Wi-Fi that blocks devices from seeing each other, or with no network at all. 1. On the phone: Settings → About phone → tap 'Build number' seven times, then Developer options → turn on 'USB debugging'. 2. Plug the phone into the PC and accept the 'Allow USB debugging' prompt. 3. On the PC run the command below (use your port). adb comes with Android Studio, or download 'SDK Platform-Tools' from Google - it is a small ZIP. 4. Open your Live Dev app. It notices the USB link and uses it before trying Wi-Fi. Run the command again after you unplug the cable or restart the phone. With USB you do NOT need the 'host' switch from step 3. If the connect screen says 'USB link is up, but nothing answers on your PC's port' - the cable part works and your dev server is simply not running. ``` adb reverse tcp:5173 tcp:5173 ``` [Download SDK Platform-Tools (adb)](https://developer.android.com/tools/releases/platform-tools) ### 6. The DEV button A small DEV button floats at the edge of the app - drag it anywhere. It turns red with a number when your page logs an error. Tap it for: - Reload - always fetches a fresh copy of every file, never a cached one. - Console - everything your page logs, errors and warnings coloured, with the file and line (src/App.tsx:42). 'Errors' filters, 'Copy' puts the whole log on the clipboard - paste it into a chat or a bug report. - Run JavaScript - a line at the bottom of the console. Type any expression and see the result, right on the phone. Promises are awaited and logged. - Refresh on save - see the next step. - Change server - another PC or another port, without rebuilding. - Clear site data and reload - wipes cookies, localStorage and IndexedDB for a clean first-run test. - Connection info - the address, USB or Wi-Fi, and this phone's IP. For full DevTools (elements, network, breakpoints) plug in the cable, open chrome://inspect in Chrome on the PC and pick your app. ### 7. Refresh on save - even for plain HTML Vite, Next, Angular and webpack push your changes into the page by themselves (hot reload). The app detects that and stays out of the way. A plain folder served by python, 'npx serve' or any static server has no hot reload - normally you would save, then pull to refresh, every single time. Live Dev does it for you: it remembers which files the page loaded, asks your server once a second whether any of them changed, and refreshes when one did. A changed .css file is swapped in place without reloading, so you keep your scroll position and form input while you style. Nothing to install on the PC. Turn it off from the DEV button if you ever want manual control. The screen also stays awake while a Live Dev app is open. ### 8. When you are done: build the real app A Live Dev app only works next to your PC - never give it to users. When the project is ready: - Framework project (Vite, React, Vue…): run 'npm run build', ZIP the dist folder (or ZIP the whole source project), and build it in Create APK → Offline ZIP. - Plain HTML folder: ZIP it with index.html at the top → Offline ZIP. One file? Use the HTML tile. - Already deployed to a real https:// address: Create APK → Website. Use your real package name for that build. Because the dev app's package ends in .dev, both can stay installed side by side. ### 9. If it does not connect - Wi-Fi: 'Waiting for your dev server' forever → the server is only listening to the PC. Restart it with the host switch from step 3 (Vite prints a 'Network:' line when it is right). - Wi-Fi: still nothing → the Windows firewall is blocking it (step 3), or the router isolates devices (common on guest, office and hotel Wi-Fi). Use USB, or turn on the phone's hotspot and connect the PC to it. - USB: 'adb' is not recognised → install Platform-Tools and run the command from that folder. 'no devices' → accept the USB debugging prompt on the phone, or try another cable (many cables are charge-only). - 'Port … is busy on this phone' → another app on the phone uses that port. Run your dev server on another port and enter it under 'Enter it yourself'. - Vite shows 'Blocked request. This host is not allowed' → you opened the PC's address in a normal browser or website app. The Live Dev app never triggers this, because it always asks for localhost. - The page loads but your API calls fail → your backend's CORS list must allow http://localhost:PORT (most dev setups already do), and an API URL written as http://localhost:4000 means the PHONE. Forward that port too (adb reverse tcp:4000 tcp:4000) or use the PC's address for the API. - A blank page after switching projects on the same port → DEV → Clear site data and reload (an old service worker is answering).