Skip to content

Instantly share code, notes, and snippets.

@scootcho

scootcho/ngrok-and-jetpack.md

Forked from mjangda/ngrok-and-jetpack.md
Created February 17, 2022 02:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scootcho/0e7d22c71419fd397508c82c14834b37 to your computer and use it in GitHub Desktop.
Save scootcho/0e7d22c71419fd397508c82c14834b37 to your computer and use it in GitHub Desktop.
Download ZIP
How to connect ngrok to your local WordPress environment (props @DanReyLop)
Raw
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:

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

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