Expose your dev Trellis/Bedrock with ngrok

This is a simple method to try my local env on mobile devices:

(with vagrant instance running and ngrok installed)

In site/config/environments/development.php add:

if (isset($_SERVER['HTTP_X_ORIGINAL_HOST'])) {
  Config::define('WP_HOMEDEV', Config::get('WP_HOME'));
  Config::define('WP_HOME', 'http://' . $_SERVER['HTTP_X_ORIGINAL_HOST']);
  Config::define('WP_SITEURL', 'http://' . $_SERVER['HTTP_X_ORIGINAL_HOST'] . '/wp');
}

In site/web/app/mu-plugins/ add forwarding.php with content:

<?php

if (defined('WP_HOMEDEV')){
  add_filter('redirect_canonical', '__return_false');
  add_action('template_redirect', function () { ob_start('wp_ngrok_forwarding'); });
}

function wp_ngrok_forwarding($html) {
  return str_replace(WP_HOMEDEV, WP_HOME, $html);
}

Then run (with your own domain):
$ ngrok http example.test --host-header=example.test

Ready! now you can open your http://example.test as usual on your browser or open ngrok url http://12345678.ngrok.io in you mobile device or share with others if needed.

5 Likes

Brilliant thanks,
I believe for https works the same, just to update ‘http://’ -> ‘https://’
and on example.test add :443 port

Working for me without forwarding.php.

But I needed to specify the protocol to avoid ‘too many redirect’ error

ngrok http https://example.test --host-header=example.test

Website is served without forwarding.php, but if page has some absolute paths on links or assets they will point to example.test and will return a 404 error in your ngrok site.

This topic was automatically closed after 42 days. New replies are no longer allowed.