| name | mobile-dev-bun |
| description | Guidelines for running local servers with Bun/bunx, previewing websites on Android/mobile devices over local Wi-Fi/USB, generating QR codes, and using tunnels. |
Mobile Testing & Bun Utility Skill
This skill documents how to manage local servers, generate QR codes, and preview web applications on mobile devices (Android/iOS) using bun and bunx.
1. Package Management & Utilities with Bun
- Prefer
bun and bunx over npm / npx for speed and consistency across commands.
- Run CLI tools with
bunx:
bunx <tool-name>
2. One-Command USB Auto-Launch (Android)
To automatically reverse port forwarding and launch Chrome on your Android phone screen:
bun run mobile
or run:
./mobile.sh
3. Serving Projects Locally for Mobile Testing
To preview static web applications on Android or other mobile devices:
4. Connecting from Mobile (Same Wi-Fi)
- Find your computer's local IP address:
ip addr show | grep 'inet '
- Open the URL in your mobile browser:
http://<YOUR_LOCAL_IP>:8080 (e.g. http://192.168.1.4:8080)
5. Generating Terminal QR Codes
Generate a quick QR code in the terminal so mobile devices can scan and open the URL immediately:
bunx qrcode-terminal "http://<YOUR_LOCAL_IP>:8080" small
6. Mobile Tunnels (Public Remote Testing)
If the mobile device is on mobile data or a different network:
bunx localtunnel --port 8080
or:
bunx cloudflared tunnel --url http://localhost:8080
7. Mobile Layout Best Practices
- Use Flexbox (
display: flex; flex-direction: column;) for touch layouts.
- Use
word-break: break-word and overflow-wrap: break-word on text containers.
- Avoid rigid
white-space: nowrap on flex buttons for narrow viewports.
