Guía Completa: LocalWP + ngrok

¿Qué es ngrok?

Servicio que crea un túnel público a tu localhost. Más simple que Cloudflare Tunnel para empezar.

Paso 1: Instalar LocalWP

Descarga desde: https://localwp.com
Instala (Windows/Mac/Linux)
Crea un nuevo sitio WordPress:
- Click en "+ Add Local Site"
- Nombre: cliente-demo
- Usa configuración por defecto
Inicia el sitio (botón Start site)

Paso 2: Instalar ngrok

Windows:

Opción A - Descarga directa:

Ve a https://ngrok.com/download
Descarga el .zip para Windows
Extrae ngrok.exe en una carpeta (ej: C:\ngrok\)
Añade esa carpeta al PATH o úsalo desde ahí

Opción B - Con Chocolatey:

choco install ngrok

macOS:

brew install ngrok/ngrok/ngrok

Linux:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
  echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok

Paso 3: Crear Cuenta en ngrok (Gratis)

Ve a https://dashboard.ngrok.com/signup
Regístrate gratis
Ve a Your Authtoken: https://dashboard.ngrok.com/get-started/your-authtoken
Copia tu token

Paso 4: Conectar ngrok con tu cuenta

ngrok config add-authtoken TU_TOKEN_AQUI

Ejemplo:

ngrok config add-authtoken 2abcd1234efgh5678ijkl9012mnop3456

Paso 5: Encontrar el Puerto de LocalWP

Método 1 - Desde LocalWP:

Click derecho en tu sitio
"Open Site Shell"
Mira la URL que aparece en el navegador
Anota el puerto (suele estar después de localhost:)

Método 2 - Archivo de configuración:

En LocalWP, click en el sitio
Ve a la pestaña "Overview"
Busca "Site Domain" - ejemplo: cliente-demo.local
El puerto suele ser el estándar: 80

Método 3 - Mirar en la URL:

Si la URL es http://cliente-demo.local, el puerto es 80 Si es http://localhost:10005, el puerto es 10005

Paso 6: Iniciar ngrok

Abre una terminal/CMD y ejecuta:

ngrok http PUERTO

Ejemplos según tu configuración:

Si LocalWP usa puerto 80:

ngrok http 80

Si LocalWP usa puerto específico (ej: 10005):

ngrok http 10005

Si tu sitio es https en local:

ngrok http https://localhost:PUERTO

Paso 7: Obtener la URL Pública

Después de ejecutar ngrok, verás algo así:

ngrok

Session Status                online
Account                       tu-email@ejemplo.com
Version                       3.x.x
Region                        Europe (eu)
Latency                       15ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://abc123def.ngrok-free.app -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Tu URL pública es: https://abc123def.ngrok-free.app

Paso 8: Configurar WordPress para la Nueva URL

Opción 1: Plugin wp-cli desde LocalWP (Más fácil)

Click derecho en tu sitio en LocalWP
"Open Site Shell"
Ejecuta:

wp search-replace 'http://cliente-demo.local' 'https://abc123def.ngrok-free.app' --all-tables

Opción 2: Editar wp-config.php

En LocalWP, click derecho → "Go to Site folder"
Abre app/public/wp-config.php
Añade ANTES de /* That's all, stop editing! */:

// Configuración para ngrok
if (isset($_SERVER['HTTP_X_ORIGINAL_HOST'])) {
    define('WP_HOME', 'https://' . $_SERVER['HTTP_X_ORIGINAL_HOST']);
    define('WP_SITEURL', 'https://' . $_SERVER['HTTP_X_ORIGINAL_HOST']);
    $_SERVER['HTTPS'] = 'on';
}

Opción 3: Plugin Better Search Replace

Instala "Better Search Replace" desde el admin de WordPress
Ve a Herramientas → Better Search Replace
Buscar: http://cliente-demo.local
Reemplazar con: https://tu-url.ngrok-free.app
Selecciona todas las tablas
✅ Marca "Run as dry run" primero (prueba)
Si todo OK, desmarca y ejecuta de verdad

Paso 9: Compartir con el Cliente

Simplemente envía la URL:

https://abc123def.ngrok-free.app

Nota: En el plan gratuito, los visitantes verán una página de advertencia de ngrok antes. Click en "Visit Site" para continuar.

Plan Gratuito vs Pagado

Plan Gratuito (suficiente para demos):

✅ Túneles ilimitados
✅ HTTPS automático
✅ 40 conexiones/minuto
⚠️ URL cambia cada vez que reinicias ngrok
⚠️ Página de advertencia para visitantes
⚠️ Sesión expira a las 2 horas (puedes reiniciar)

Plan Paid ($8/mes):

✅ URLs personalizadas fijas: cliente1.tudominio.ngrok.app
✅ Sin página de advertencia
✅ Sin límite de tiempo
✅ Más conexiones simultáneas

Comandos Útiles

Especificar región:

ngrok http 80 --region eu

Con subdominio personalizado (requiere plan de pago):

ngrok http 80 --domain=cliente-demo.ngrok.app

Ver todas las peticiones HTTP:

Ve a: http://localhost:4040 (Interfaz web de ngrok para debugging)

Ejecutar en background:

Linux/Mac:

ngrok http 80 > /dev/null &

Windows: Usa otra ventana de CMD

Flujo de Trabajo Completo

Primera vez con un cliente:

Crear sitio en LocalWP Nombre: cliente-acme
Iniciar el sitio
- Click en "Start site" en LocalWP
Desarrollar el sitio
- Instala tema, plugins, contenido
Cuando el cliente quiera verlo: ngrok http 80
Configurar WordPress: # En LocalWP → Open Site Shell: wp search-replace 'http://cliente-acme.local' 'https://URL-NGROK' --all-tables
Enviar URL al cliente
Después de la demo:
- Ctrl+C para cerrar ngrok
- Revertir URLs:
wp search-replace 'https://URL-NGROK' 'http://cliente-acme.local' --all-tables

Trucos y Tips

1. Mantener URL fija en plan gratuito

Guarda tu URL en un archivo de texto cada vez:

ngrok http 80 | tee ngrok-url.txt

2. Script para automatizar (Windows PowerShell):

Crea iniciar-demo.ps1:

# Iniciar ngrok
Start-Process powershell -ArgumentList "ngrok http 80"
Start-Sleep -Seconds 3

# Obtener URL
$url = Invoke-RestMethod http://localhost:4040/api/tunnels | 
       Select-Object -ExpandProperty tunnels | 
       Select-Object -ExpandProperty public_url -First 1

# Mostrar URL
Write-Host "URL para el cliente: $url" -ForegroundColor Green

# Copiar al portapapeles
Set-Clipboard $url
Write-Host "URL copiada al portapapeles!" -ForegroundColor Yellow

3. Script para Linux/Mac:

Crea iniciar-demo.sh:

#!/bin/bash
# Iniciar ngrok en background
ngrok http 80 &
sleep 3

# Obtener y mostrar URL
URL=$(curl -s http://localhost:4040/api/tunnels | jq -r '.tunnels[0].public_url')
echo "URL para el cliente: $URL"

# Copiar al portapapeles (Mac)
echo $URL | pbcopy
echo "URL copiada al portapapeles!"

4. Configuración permanente en wp-config.php:

// Detectar si estamos en ngrok
if (strpos($_SERVER['HTTP_HOST'], 'ngrok') !== false) {
    define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);
    define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);
    $_SERVER['HTTPS'] = 'on';
}

Así no necesitas hacer search-replace cada vez.

Solución de Problemas

Error: "command not found: ngrok"

Verifica que ngrok esté instalado correctamente
En Windows, usa la ruta completa: C:\ngrok\ngrok.exe http 80

El sitio se ve sin CSS/JS:

Haz el search-replace de URLs correctamente
Añade el código de wp-config.php para detectar ngrok

"Too many redirects":

Añade en wp-config.php:

$_SERVER['HTTPS'] = 'on';

Puerto ocupado:

Cambia el puerto:

ngrok http 8080

ngrok se cierra solo:

En plan gratuito, las sesiones expiran a las 2 horas
Simplemente reinicia: ngrok http 80

Comparación: ngrok vs Cloudflare Tunnel

Característica	ngrok (gratis)	Cloudflare Tunnel
Instalación	Más simple	Un poco más compleja
Configuración inicial	2 minutos	5-10 minutos
URL fija	❌ (cambia)	✅ Con dominio
Página advertencia	✅ Sí	❌ No
Límite de tiempo	2 horas/sesión	Sin límite
Interfaz debug	✅ Excelente	❌ No
Ideal para	Demos rápidas	Uso permanente

Resumen Ultra Rápido

# 1. Instalar ngrok
brew install ngrok/ngrok/ngrok  # Mac
# o descarga desde ngrok.com

# 2. Conectar cuenta
ngrok config add-authtoken TU_TOKEN

# 3. Iniciar LocalWP
# Click en "Start site"

# 4. Exponer a internet
ngrok http 80

# 5. Compartir la URL que aparece
https://abc123.ngrok-free.app

¡Listo en menos de 5 minutos! 🚀

Buscador

Servicio que crea un túnel público a tu localhost. Guía Completa: LocalWP + ngrok