Tooling
Laravel Valet
Connecting Jetpack

Connecting Local Valet Site to JetPack

Some Jetpack features, such the Instagram oEmbed provider, are only available to sites with an active connection to Jetpack. A local Valet site can be connected to Jetpack by tunneling traffic though Ngrok. This setup requires changing Valet's TLD if using a free account, which "switches" your entire local environment to work with only the site being connected to Jetpack until it's switched back.

⚠️

With a default/free Ngrok configuration, the tunnel makes the local site publicly accessible. Do not tunnel unauthenticated traffic to your local site if it contains any real drafts, not-for-publish posts, production user data, or any other sensitive information.

Installation

  1. Back up your Valet Nginx server blocks at ~/.config/valet/Nginx, just in case changing Valet's TLD causes an unwanted loss of configuration
  2. Sign up for Ngrok (opens in a new tab)
  3. Install Ngrok (opens in a new tab) (Homebrew is suggested)
  4. Go to your Ngrok Dashboard (opens in a new tab) and add a static domain in Cloud Edge → Domains (opens in a new tab)

Enabling Jetpack on a site

  1. Set your local Valet-hosted site's domain to the static Ngrok domain:
    1. cd to your "parked" sites directory (ex: cd ~/pmc/sites)
    2. Rename the directory of the site you want to connect to Jetpack to match the static Ngrok domain (ex: mv rollingstone ohi-marc.ngrok-free.app)
    3. Switch the target site's URL in the database. Ex: 
      cd rollingstone && wp search-replace https://rollingstone.test https://ohi-marc.ngrok-free.app
  2. Switch Valet's top-level domain from test to the Ngrok static domain with valet domain app (app being the domain). This will reset all of your Valet Nginx server blocks, wiping out any custom configurations. The Nginx site configuration injection script can be used to restore those values, though. If you have a paid account that can configure a .test domain, this step is not required.
  3. Get the Nginx site configuration injection script and set gltd to match the static Ngrok domain (ex: test to app).
  4. Execute the Nginx configuration injection script
  5. Start the Ngrok tunnel. Ex: 
    ngrok http --domain=ohi-marc.ngrok-free.app ohi-marc.ngrok-free.app:443
  6. Visit the domain and connect the site to Jetpack in the WordPress admin

Restoring Valet back to .test

  1. Kill the Ngrok tunnel if it's still running
  2. Switch Valet's top-level domain back to .test with valet domain test
  3. Set the Nginx configuration injection script's gltd back to test and execute it
  4. Switch your local site directory and database URLs back to the .test domain
Laravel ValetJetpack