How to connect ngrok to your local WordPress environment (props @DanReyLop)

ngrok-and-jetpack.md

How to develop with Jetpack locally with ngrok

To connect Jetpack in your local installation, you'll need a way for WP.com servers to reach your server. That can be done in a number of different ways:

• You can open your router's ports and use your public IP
• You can use some kind of Dynamic DNS provider.

But these options fall short of ngrok, which is a "localhost tunnel". It basically allows the Internet to hit a local port on your machine without worrying about ports or IPs.

As long as ngrok is running, Jetpack / WP.com will be able to communicate with your local site. This will allow remote modules like Site Search and Manage to work.

Installation

Install ngrok

To get started:

• Download ngrok: https://ngrok.com/download
• Sign up on http://ngrok.com
• Go to https://dashboard.ngrok.com/auth and follow its instructions to load the auth token into the CLI.

Create a tunnel

To create a tunnel between ngrok and your local site, you can run the following command at any time:

ngrok http -subdomain=yoursubdomain yoursubdomain.ngrok.io:80

Change yoursubdomain for any name that you prefer. Note that the subdomain name isn't reserved, so choose something that's unique and unlikely to be used by someone else.

As long as it keeps running, you'll have an http and https tunnel working.

Update hosts file

Add the following entry to your hosts file:

127.0.0.1 yoursubdomain.ngrok.io

You may need to flush DNS caches, or restart your browser for this change to take effect.

The hosts file mapping also make it possible for you to use the ngrok URL (http://yoursubdomain.ngrok.io) for local development; it will even keep working even without an internet connection.

Update WordPress URLs

Go to your WordPress admin dashboard, Settings > General and change these settings:

• WordPress Address (URL): http://yoursubdomain.ngrok.io
• Site Address (URL): http://yoursubdomain.ngrok.io

Note that you may need to adjust the URL depending on how WordPress is installed. For example, if installed in a subdirectory called wp for local webserver root, your URL should be http://yoursubdomain.ngrok.io/wp.

Connecting Jetpack

• Navigate to yoursubdomain.ngrok.io/wp-admin (you may have to login again).
• Install, activate and connect Jetpack.

And you're done!

Working with Vagrant / Docker

TODO

This doesn't seem to be possible with the free version of ngrok as the subdomain is dynamic.... These instructions work best for WordPress https://ngrok.com/docs#wordpress

Works smooth with the documentation from ngrok. Thanks!

Could you update the gist for Vagrant please? It's going in redirection loop after changing wordpress Site URL and home URL as ngrok domains.