Cara Share Website Lokal ke Internet Pakai ngrok (Demo ke Client & Teman)

Pernah selesai bikin website tapi masih jalan di localhost:3000? Mau nunjukin ke client atau teman tapi belum sempat deploy? Solusinya: ngrok — tool yang membuat tunnel dari internet publik ke localhost kamu dalam hitungan detik.

Apa Itu ngrok?

ngrok adalah layanan tunneling yang memberikan URL publik (HTTPS) untuk aplikasi yang jalan di komputer lokal kamu. Cocok untuk:

• Demo project ke client tanpa deploy dulu
• Testing webhook (Stripe, Midtrans, WhatsApp, GitHub)
• Nunjukin progress ke teman/tim
• Testing aplikasi di HP tanpa setting IP jaringan
• Buka akses sementara ke aplikasi lokal (misal Home Assistant)

Cara Kerja Singkat

1. Kamu jalankan ngrok http 3000 di terminal
2. ngrok bikin tunnel dari server publik mereka ke laptop kamu
3. Setiap request ke URL ngrok → diteruskan ke localhost:3000
4. Response kamu dikirim balik lewat tunnel yang sama

Kelebihan: tidak perlu buka port di router, tidak perlu VPN, dan langsung dapat HTTPS gratis.

Langkah 1: Daftar & Install ngrok

1. Daftar gratis di ngrok.com
2. Download binary sesuai OS di ngrok.com/download
3. Atau via package manager:

# macOS
brew install ngrok/ngrok/ngrok

# Windows (Chocolatey)
choco install ngrok

# Linux (Snap)
snap install ngrok

Langkah 2: Pasang Auth Token

Setelah daftar, ambil token dari dashboard.ngrok.com/get-started/your-authtoken.

ngrok config add-authtoken <TOKEN_KAMU>

Token cukup dipasang sekali — tersimpan di ~/.config/ngrok/ngrok.yml.

Langkah 3: Jalankan Tunnel

Pastikan aplikasi kamu sudah jalan (npm run dev, php artisan serve, python manage.py runserver, dll). Misal di port 3000:

ngrok http 3000

Kamu akan dapat URL publik seperti:

Kirim URL itu ke teman/client — mereka bisa akses dari mana saja, langsung terhubung ke laptop kamu.

Framework Umum & Port Default

Fitur Berguna

1. Web Inspector (localhost:4040)

Buka http://localhost:4040 di browser saat ngrok jalan. Kamu bisa lihat semua request/response yang masuk — sangat berguna untuk debug webhook.

2. Replay Request

Di web inspector, klik request → tombol Replay. Cocok untuk testing webhook Stripe/Midtrans berulang tanpa harus trigger transaksi ulang.

3. Custom Subdomain (Paid / Free Static Domain)

Free plan sekarang dapat 1 domain statis gratis (misal nama-kamu.ngrok-free.app) supaya URL nggak berubah tiap restart:

ngrok http --domain=nama-kamu.ngrok-free.app 3000

Klaim domain gratis di dashboard.ngrok.com/cloud-edge/domains.

4. Basic Auth

Proteksi tunnel dengan username & password:

ngrok http 3000 --basic-auth="user:passwordkuat"

Masalah Umum & Solusi

Fix Vite / Next.js Blokir Host ngrok

Vite (vite.config.ts):

export default defineConfig({
  server: {
    allowedHosts: [".ngrok-free.app"],
  },
});

Next.js: biasanya jalan langsung. Kalau ada masalah HMR, jalankan:

ngrok http 3000 --host-header=localhost

Alternatif ngrok

Untuk kebutuhan sehari-hari — ngrok paling praktis. Untuk production/permanent — Cloudflare Tunnel lebih baik (gratis, tanpa batas).

Tips Keamanan ⚠️

• Jangan biarkan tunnel jalan 24/7 — ngrok = akses ke laptop kamu
• Pakai Basic Auth kalau demo ke client
• Jangan share database credentials lewat aplikasi tunnel
• Matikan tunnel setelah selesai demo (Ctrl+C)
• Untuk production → deploy proper (Vercel, Netlify, VPS)

Kesimpulan

ngrok = cara tercepat share website lokal ke internet. Cukup 3 langkah: install → set auth token → ngrok http <port>. URL publik siap dalam 5 detik. Cocok untuk demo, testing webhook, dan preview cepat ke client. Tapi ingat: tunneling itu sementara — untuk production tetap harus deploy proper.

Selamat mencoba, dan jangan lupa matikan tunnel setelah selesai! 🚀