WordPress local development with ngrok.

wp-ngrok.md

WordPress Local Development and ngrok (macOS)

Setup

• Install ngrok with hombrew brew cask install ngrok
• Run ngrok for your local site ngrok http -host-header=my.site.local 80
• Copy the https url that appears in the terminal and use it below to replace the ngrok.io url
• If using the standard WP setup add the following to the bottom of wp-config.php

<?php
// Add a value if using NGROK
$ngrok_url = 'https://your-tunnel.ngrok.io';

// Make sure to override the DB settings
if (isset($ngrok_url)) {
	define('WP_HOME', $ngrok_url);
	define('WP_SITEURL', $ngrok_url);
}

• If using Root's Bedrock structure add the following to .env and comment out the existig WP_HOME definition

WP_HOME=https://your-tunnel.ngrok.io

Using a YAML config

• Create a YMAL file to store your various local sites for ngrok touch ~/.ngrok2/ngrok.yml
• Open the file inthe editor of your choice and add the following

tunnels:
  site1: # The name used to reference the site
    proto: http
    addr: 80
    host_header: my.site.local
  site1_443: # if your vhost is setup to use 443 this should also work
    proto: http
    addr: https://my.site.local:443
    host_header: my.site.local

• Create the tunnel ngrok start site1
• Follow the instructions from above to add the https url to your WordPress config