Skip to content

Instantly share code, notes, and snippets.

@mjangda
Last active February 7, 2023 07:57
Show Gist options
  • Save mjangda/7fcafffda4c6c5c1de18c4af647bd111 to your computer and use it in GitHub Desktop.
Save mjangda/7fcafffda4c6c5c1de18c4af647bd111 to your computer and use it in GitHub Desktop.
How to connect ngrok to your local WordPress environment (props @DanReyLop)

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:

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

@eversionsystems
Copy link

eversionsystems commented Feb 24, 2020

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

@RazvanFarte
Copy link

Works smooth with the documentation from ngrok. Thanks!

@jigneshbhavani
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment